<template>
  <div
    id="index"
    v-title
    @click="isShow = false"
    data-title="掌上精选-直播电商数据分析&智能分析服务平台"
  >
    <section class="header">
      <div class="headerFixedBox">
        <div class="ulBox">
          <div class="logoBoxtop">
            <img src="@/assets/shi/logo-2.png" class="logo" />
            <div class="dropdown">
              <el-dropdown
                size="small"
                placement="bottom"
                trigger="click"
                @command="batchOperate"
                style
              >
                <el-button class="search-btn" size="mini">
                  <img src="@/assets/zhao/dylogo.png" class="ddlogo" /> 抖音
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="batch_remarks">
                    <img src="@/assets/zhao/dylogo.png" class="ddlogo" />抖音
                  </el-dropdown-item>
                  <!-- <el-dropdown-item command="batch_remarks">批量备注</el-dropdown-item>
                  <el-dropdown-item command="export_excel">本页导出Excel</el-dropdown-item>-->
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <div class="flexRight">
            <div class="menuList">
              <el-menu
                :default-active="activeIndex"
                class="el-menu-index"
                mode="horizontal"
                @select="selectMenu"
              >
                <el-submenu
                  index="1"
                  popper-class="indexPop"
                  :show-timeout="navShowTime"
                  :hide-timeout="navHideTime"
                >
                  <template slot="title">达人分析</template>
                  <el-menu-item
                    index
                    style="
                      height: 107px;
                      line-height: 20px;
                      padding: 8px 0 0 0 !important;
                    "
                  >
                    <div class="navbox">
                      <p class="nav01">
                        <!-- <i class="snav01"></i> -->
                        <img src="@/assets/zhao/nav01.png" />
                        <span @click="toEdit(0)">达人排行榜</span>
                      </p>
                      <span
                        @click="toEdit(0)"
                        style="color: #555; padding-left: 25px"
                        >粉丝榜</span
                      >
                      <!-- <span @click="toEdit(1)" style="color: #555">行业排行榜</span> 
                      <br />-->
                      <span @click="toEdit(2)" style="color: #555"
                        >地区排行榜</span
                      >
                      <br />
                      <span
                        @click="toEdit(3)"
                        style="color: #555; padding-left: 25px"
                        >蓝V排行榜</span
                      >
                    </div>
                  </el-menu-item>
                  <el-menu-item
                    index
                    style="
                      height: 78px;
                      line-height: 20px;
                      padding: 8px 0 0 0 !important;
                    "
                  >
                    <div class="navbox">
                      <img src="@/assets/zhao/nav02.png" />
                      <span @click="toEdit(4)">星图达人榜</span>
                      <br />
                      <span
                        @click="toEdit(5)"
                        style="color: #555; padding-left: 25px"
                        >短视频达人榜</span
                      >
                      <span @click="toEdit(6)" style="color: #555"
                        >直播达人榜</span
                      >
                    </div>
                  </el-menu-item>
                </el-submenu>
                <el-submenu
                  index="2"
                  popper-class="indexPop"
                  class="item_new"
                  :show-timeout="navShowTime"
                  :hide-timeout="navHideTime"
                >
                  <template slot="title">
                    智能分析
                    <img src="@/assets/meng/nav_new.png" class="newImg" />
                  </template>
                  <el-menu-item index="/inAnalysis/talentLibrary">
                    <img src="@/assets/zhao/nav15.png" />
                    <span>达人资源库</span>
                  </el-menu-item>
                  <!-- <el-menu-item index="/inAnalysis/findTalent">
                    <img src="@/assets/zhao/nav20.png" />
                    <span>智能找达人</span>
                  </el-menu-item>
                  <el-menu-item index="/inAnalysis/three">
                    <img src="@/assets/zhao/nav17.png" />
                    <span>智能找商品</span>
                  </el-menu-item> -->
                  <el-menu-item index="/inAnalysis/diagnosisIndex">
                    <img src="@/assets/zhao/nav18.png" />
                    <span>账号诊断</span>
                  </el-menu-item>
                </el-submenu>
                <el-submenu
                  index="3"
                  popper-class="indexPop"
                  :show-timeout="navShowTime"
                  :hide-timeout="navHideTime"
                >
                  <template slot="title">直播分析</template>
                  <el-menu-item index="/talent_main/liveTrafficMarket">
                    <img src="@/assets/zhao/nav10.png" />
                    <span>实时数据大盘</span>
                  </el-menu-item>
                  <el-menu-item index="/talent_main/live_house">
                    <img src="@/assets/zhao/nav11.png" />
                    <span>直播预告看板</span>
                  </el-menu-item>
                  <el-menu-item
                    index
                    style="
                      height: 78px;
                      line-height: 20px;
                      padding: 8px 0 0 0 !important;
                    "
                  >
                    <div class="navbox">
                      <img src="@/assets/zhao/nav12.png" />
                      <span @click="toEdit(13)">实时直播大厅</span>
                      <br />

                      <span
                        @click="toEdit(115)"
                        style="color: #555; padding-left: 25px"
                        >直播带货榜</span
                      >
                      <span @click="toEdit(114)" style="color: #555"
                        >直播小时榜</span
                      >
                      <br />
                      <span
                        @click="toEdit(116)"
                        style="color: #555; padding-left: 25px"
                        >直播人气榜</span
                      >
                    </div>
                  </el-menu-item>
                  <el-menu-item
                    index
                    style="
                      height: 78px;
                      line-height: 20px;
                      padding: 8px 0 0 0 !important;
                    "
                  >
                    <div class="navbox">
                      <img src="@/assets/zhao/nav13.png" />
                      <span @click="toEdit(16)">直播爆品榜</span>
                      <br />
                      <span
                        @click="toEdit(17)"
                        style="color: #555; padding-left: 25px"
                        >实时爆品榜</span
                      >
                      <span @click="toEdit(18)" style="color: #555"
                        >历史爆品榜</span
                      >
                    </div>
                  </el-menu-item>
                  <el-menu-item
                    index
                    style="
                      height: 54px;
                      line-height: 20px;
                      padding: 8px 0 0 0 !important;
                    "
                  >
                    <div class="navbox">
                      <img src="@/assets/zhao/nav14.png" />
                      <span @click="toEdit(19)">直播达人榜</span>
                      <br />
                      <!-- <span @click="toEdit(20)"
                      style="color: #555; padding-left: 25px">直播达人榜</span>-->
                      <!-- <span @click="toEdit(21)"
                            style="color: #555">音浪达人榜</span><br />
                      <span @click="toEdit(22)"
                            style="color: #555; padding-left: 25px">土豪打赏榜</span>
                      <span @click="toEdit(23)"
                      style="color: #555">直播分享榜</span>-->
                    </div>
                  </el-menu-item>
                </el-submenu>
                <el-submenu
                  index="4"
                  popper-class="indexPop"
                  :show-timeout="navShowTime"
                  :hide-timeout="navHideTime"
                >
                  <template slot="title">商品分析</template>
                  <el-menu-item
                    index
                    style="
                      height: 78px;
                      line-height: 20px;
                      padding: 8px 0 0 0 !important;
                    "
                  >
                    <div class="navbox">
                      <img src="@/assets/zhao/nav6.png" />
                      <span @click="toEdit(7)">商品榜</span>
                      <br>
                      <!-- <span
                        @click="toEdit(8)"
                        style="color: #555; padding-left: 25px"
                        >抖音销量榜</span
                      > -->
                      <span @click="toEdit(9)" style="color: #555;padding-left: 25px"
                        >全网销量榜</span
                      >
                      <!-- <span @click="toEdit(66)" style="color: #555; padding-left: 25px">达人销量榜</span> -->
                      <span
                        @click="toEdit(88)"
                        style="color: #555;"
                        >抖音小店排行榜</span
                      >
                    </div>
                  </el-menu-item>
                  <el-menu-item
                    index
                    style="
                      height: 78px;
                      line-height: 20px;
                      padding: 8px 0 0 0 !important;
                    "
                  >
                    <div class="navbox">
                      <img src="@/assets/zhao/nav07.png" />
                      <span @click="toEdit(10)">带货视频榜</span>
                      <br />
                      <span
                        @click="toEdit(11)"
                        style="color: #555; padding-left: 25px"
                        >飙升榜</span
                      >
                      <span @click="toEdit(12)" style="color: #555"
                        >热评榜</span
                      >
                    </div>
                  </el-menu-item>
                  <!-- <el-menu-item index="/talent_main/talentSalesList">
                    <img src="@/assets/zhao/nav08.png" />
                    <span> 达人销量榜</span>
                  </el-menu-item>-->
                  <!-- <el-menu-item index="/talent_main/shopList">
                    <img src="@/assets/zhao/nav09.png">
                    <span>抖音小店排行榜</span>
                  </el-menu-item>-->
                </el-submenu>
                <el-submenu
                  index="5"
                  popper-class="indexPop"
                  :show-timeout="navShowTime"
                  :hide-timeout="navHideTime"
                >
                  <template slot="title">品牌分析</template>
                  <el-menu-item index="talent_main/list?input_btn">
                    <img src="@/assets/zhao/nav19.png" />
                    <span>品牌排行榜</span>
                  </el-menu-item>
                  <!-- <el-menu-item index="/talent_main/list?input_btn=品牌热DOU榜">
                    <img src="@/assets/zhao/nav16.png" />
                    <span>品牌热DOU榜</span>
                  </el-menu-item> -->
                </el-submenu>
                <!-- 
                <el-submenu index="6" popper-class="indexPop">
                  <template slot="title">数据监测</template>
                  <el-menu-item index="/talent_main/liveMonitor">
                    <img src="@/assets/zhao/nav21.png" />
                    <span>直播监测</span>
                  </el-menu-item>
                  <el-menu-item index="/talent_main/accountMonitor">
                    <img src="@/assets/zhao/nav22.png" />
                    <span>账号监测</span>
                  </el-menu-item>
                </el-submenu>-->

                <el-submenu
                  index="7"
                  popper-class="indexPop"
                  :show-timeout="navShowTime"
                  :hide-timeout="navHideTime"
                >
                  <template slot="title">短视频分析</template>
                  <el-menu-item index="/talent_main/hot_video">
                    <img src="@/assets/zhao/nav03.png" />
                    <span>热门视频</span>
                  </el-menu-item>
                  <el-menu-item index="/talent_main/hotMusic">
                    <img src="@/assets/zhao/nav04.png" />
                    <span>热门音乐</span>
                  </el-menu-item>
                  <el-menu-item index="/talent_main/hotTopic">
                    <img src="@/assets/zhao/nav05.png" />
                    <span>热门话题</span>
                  </el-menu-item>
                </el-submenu>
              </el-menu>
            </div>
          </div>
          <!-- 进入按钮 -->
          <div class="hrightBox">
            <!-- <button
              v-if="is_login"
              @click="
                is_login
                  ? $router.push('/talent_main/workbench')
                  : login_register()
              "
            >
              进入
            </button>-->
            <!-- 新用户领取vip 第一版 -->
            <!-- <div class="activity_btn" @click="vipActivity">
              <div class="btn" v-if="SVipType == 3" @click="vipActivity">
                <img src="@/assets/shi/svip.png" alt />
                <span>限时会员活动</span>
              </div>
              <div
                class="btn"
                v-else-if="SVipType == 1 && SVipLevel == 0"
                @click="freeGetVip"
              >
                <img src="@/assets/shi/svip.png" alt />
                <span style="font-size: 12px">免费领取SVIP版</span>
              </div>
              <div class="btn" v-else-if="SVipType">
                <i :class="'vip' + SVipLevel" class="vip"></i>
                <span>{{ SVipLevel | filtLevelName }}</span>
              </div>
            </div> -->
            <!--  -->

            <!-- Svip个人版会员第二版 -->
            <div class="activity_btn" @click="freeGetVip">
              <div class="svip_btn"><img src="@/assets/shi/grbhy-icon.png" alt=""></div> 
            </div>

            <!-- <div class="activity_btn" @click="vipActivity">
              <img src="/static/huodong_svip.gif" alt="限时超值活动" />
            </div> -->
            <!-- 下载app -->
            <!-- <div class="down_app">
              <el-popover placement="bottom" trigger="hover">
                <div class="frame_box">
                  <div class="code_img">
                    <img src="@/assets/shi/down_ewm.png" alt="">
                  </div>
                  <p
                    style="
                      text-align: center;
                      font-size: 14px;
                      color: #888888;
                      margin-top: 10px;
                    "
                  >扫码下载APP</p>
                </div>

                <div slot="reference" class="down_app_box">
                  <img src="@/assets/shi/mobilePhone.png" alt="">
                  <span>下载APP</span>
                </div>
              </el-popover> 
            </div> -->
            <button v-if="!is_login" class="ml_50" @click="login_register()">
              登录/注册
            </button>

            <section class="avatar" v-if="is_login">
              <!-- <img v-if="!is_login && photo == ''"
                    src="@/assets/meng/touxiang.png"
              @click="login_register()" />-->
              <div class="user_head">
                <img v-if="photo" :src="photo" />
                <img v-else src="@/assets/meng/touxiang.png" />
              </div>
              <div v-if="photo" class="vip_wrap">
                <img
                  v-if="person_message && person_message.vipLevel == 0"
                  src="@/assets/shi/vip1.png"
                  alt
                />
                <img
                  v-if="person_message && person_message.vipLevel == 3"
                  src="@/assets/shi/vip2.png"
                  alt
                />
                <img
                  v-if="person_message && person_message.vipLevel == 4"
                  src="@/assets/shi/vip3.png"
                  alt
                />
                <img
                  v-if="person_message && person_message.vipLevel == 1"
                  src="@/assets/shi/vip4.png"
                  alt
                />
                <img
                  v-if="person_message && person_message.vipLevel == 5"
                  src="@/assets/shi/vip4.png"
                  alt
                />
                <img
                  v-if="person_message && person_message.vipLevel == 2"
                  src="@/assets/shi/vip5.png"
                  alt
                />
              </div>
              <!-- 个人信息 -->
              <!-- 个人信息 -->
              <UserInfoPop :person_message="person_message" @logOut="indexLogOut"/>
            </section>
          </div>
        </div>
      </div>
      <!-- header占位 -->
      <!-- <div style="width: 100%; height: 62px; clear: both"></div> -->
      <!-- 搜索 -->
      <div class="searchIndex">
        <video
          :src="$global.staticUrl + 'video/homeVideo.mp4'"
          autoplay="autoplay"
          loop="loop"
          muted="muted"
          controlslist="nodownload"
          height="520px"
          width="100%"
          style="object-fit: cover"
        ></video>
        <div class="zhegaiceng"></div>
        <div class="searchItem">
          <p class="searchTitle">查达人 查商品 查直播 尽在掌上精选</p>
          <el-radio-group v-model="searchType">
            <el-radio-button label="达人"></el-radio-button>
            <el-radio-button label="商品"></el-radio-button>
            <el-radio-button
              label="直播间"
              style="margin-left: 8px"
            ></el-radio-button>
          </el-radio-group>
          <div class="searchIndexBox">
            <el-input
              v-model="keywords"
              :placeholder="placeholder"
              @keyup.enter.native="toSearch"
              onfocus="this.style.color='#222 !important';"
              @click.stop.native="Inputfocus"
            ></el-input>
            <div class="imgBox" @click="toSearch">
              <img src="@/assets/meng/search01.png" />
            </div>
          </div>
          <!-- 搜索记录区域显示 -->
          <section
            class="search_wen"
            v-show="isShow && search_wen.length !== 0 && keywords.length == 0"
            ref="showRef"
          >
            <ul>
              <li class="first">
                <span>搜索记录</span>
                <img
                  src="@/assets/zhao/delete.png"
                  @click="removeAll()"
                  class="removeAll"
                />
              </li>
              <li
                v-for="(item, index) in search_wen"
                :key="index"
                class="second"
                @click="add_click(item.log)"
              >
                <span>{{ item.log }}</span>
                <img
                  src="@/assets/meng/my_header01.png"
                  @click.stop="removeThis(item.id)"
                />
              </li>
            </ul>
          </section>
        </div>
      </div>
      <!-- 首页活动贴纸 -->
      <!-- <div class="streamer_box left_streamer" v-if="bilateralBanner">
        <img :src="bilateralBanner[0].preview" alt />
      </div>
      <div class="streamer_box right_streamer" v-if="bilateralBanner">
        <img :src="bilateralBanner[1].preview" alt />
      </div> -->
    </section>
    <section class="content">
      <div class="banner_s" :style="{'height':PcBanner?'166px':'120px'}">
        <!-- <img src="/static/banner_s.png" alt /> -->
        <el-carousel
          height="166px"
          arrow="never"
          :interval="6000"
          v-if="PcBanner"
        >
          <template v-for="(item, index) in PcBanner">
            <el-carousel-item :key="index" v-if="item.pcImg">
              <!-- <img src="/static/banner_s.png" alt />  -->
              <img
                :src="item.pcImg"
                class="PcBanner"
                @click="bannerLink(item)"
              />
            </el-carousel-item>
          </template>
        </el-carousel>
        <img src="/static/banner_s.png" v-else />
      </div>
      <!-- 热门榜单 -->
      <div class="hotRankBox">
        <div class="index_title">
          <h3>热门榜单</h3>
          <p>精选热门排行榜单，实现对数据的精准监控分析</p>
        </div>
        <div class="hotRank">
          <div class="hotItem">
            <div class="titleLine">
              <span>达人粉丝榜</span>
              <span @click="talentmore()">
                更多
                <img src="../assets/meng/morejt_03.png" alt />
              </span>
            </div>
            <table class="table01" v-if="!loading01">
              <thead>
                <tr>
                  <th>达人</th>
                  <th>粉丝总数</th>
                  <th>点赞数</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in fansList" :key="'fans' + index">
                  <td class="td1">
                    <div class="avatorBox" @click="goPage(9, item.authorId)">
                      <img v-lazy="item.logo" alt />
                      <!-- <el-tooltip class="item"
                                  effect="light"
                                  :content="item.nickName"
                                  placement="top"
                                  popper-class="mytooltip"
                      :hide-after="2000">-->
                      <span>{{ item.nickName }}</span>
                      <!-- </el-tooltip> -->
                    </div>
                  </td>
                  <td style="width: 101px">{{ format_num(item.totalFans) }}</td>
                  <td class="td3">{{ format_num(item.totalFavorite) }}</td>
                </tr>
              </tbody>
            </table>
            <div
              v-loading="loading01"
              v-if="loading01"
              class="loading loadingIndex"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
            ></div>
          </div>
          <div class="hotItem">
            <div class="titleLine">
              <span>商品销量榜</span>
              <span @click="goodsmore()">
                更多
                <img src="../assets/meng/morejt_03.png" alt />
              </span>
            </div>
            <table class="table01" v-if="!loading02">
              <thead>
                <tr>
                  <th>商品</th>
                  <th>日访客量</th>
                  <th>日销量</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in salesList" :key="'goods' + index">
                  <td class="td1">
                    <div class="avatorBox" @click="goPage(13, item.pro_id)">
                      <img v-lazy="item.logo" alt class="goodsIcon" />
                      <!-- <el-tooltip class="item"
                                  effect="light"
                                  :content="item.title"
                                  placement="top"
                                  popper-class="mytooltip"
                      :hide-after="2000">-->
                      <span>{{ item.title }}</span>
                      <!-- </el-tooltip> -->
                    </div>
                  </td>
                  <td style="width: 101px">{{ format_num(item.pv_incr) }}</td>
                  <td class="td3">{{ format_num(item.sale_incr) }}</td>
                </tr>
              </tbody>
            </table>
            <div
              v-loading="loading02"
              v-if="loading02"
              class="loading loadingIndex"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
            ></div>
          </div>
          <div class="hotItem">
            <div class="titleLine">
              <span>直播排行榜</span>
              <span @click="livemore()">
                更多
                <img src="../assets/meng/morejt_03.png" alt />
              </span>
            </div>
            <table class="table01" v-if="!loading03">
              <thead>
                <tr>
                  <th>直播</th>
                  <th>销量</th>
                  <th>销售额</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in liveList" :key="'live' + index">
                  <td class="td1">
                    <div class="avatorBox" @click="goPage(14, item.room_id)">
                      <img v-lazy="item.room_logo" alt class="goodsIcon" />
                      <!-- <el-tooltip class="item"
                                  effect="light"
                                  :content="item.room_title"
                                  placement="top"
                                  popper-class="mytooltip"
                      :hide-after="2000">-->
                      <span>{{ item.room_title }}</span>
                      <!-- </el-tooltip> -->
                    </div>
                  </td>
                  <td style="width: 101px">{{ format_num(item.volume) }}</td>
                  <td class="td3">{{ format_num(item.sales) }}</td>
                </tr>
              </tbody>
            </table>
            <div
              v-loading="loading03"
              v-if="loading03"
              class="loading loadingIndex"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
            ></div>
          </div>
          <!--  -->
        </div>
        <!-- 后三个榜单 -->
        <div class="hotRank hotranktwo">
          <div class="hotItem">
            <div class="titleLine">
              <span>星图达人榜</span>
              <span @click="starmap()">
                更多
                <img src="../assets/meng/morejt_03.png" alt />
              </span>
            </div>
            <table class="table01" v-if="!loading02">
              <thead>
                <tr>
                  <th>达人</th>
                  <th>粉丝总数</th>
                  <th>星图指数</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in star_map" :key="'fans' + index">
                  <td class="td1">
                    <div class="avatorBox" @click="goPage(9, item.authorId)">
                      <img v-lazy="item.logo" alt />
                      <!-- <el-tooltip class="item"
                                  effect="light"
                                  :content="item.nickName"
                                  placement="top"
                                  popper-class="mytooltip"
                      :hide-after="2000">-->
                      <span>{{ item.nickName }}</span>
                      <!-- </el-tooltip> -->
                    </div>
                  </td>
                  <td style="width: 101px">{{ format_num(item.totalFans) }}</td>
                  <td class="td3">{{ format_num(item.hint) }}</td>
                </tr>
              </tbody>
            </table>
            <div
              v-loading="loading02"
              v-if="loading02"
              class="loading loadingIndex"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
            ></div>
          </div>
          <div class="hotItem">
            <div class="titleLine">
              <span>直播达人榜</span>
              <span @click="volumemore()">
                更多
                <img src="../assets/meng/morejt_03.png" alt />
              </span>
            </div>
            <table class="table01" v-if="!loading02">
              <thead>
                <tr>
                  <th>达人</th>
                  <th>销量</th>
                  <th>销售额</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in volume" :key="'goods' + index">
                  <td class="td1">
                    <div class="avatorBox" @click="goPage(15, item.authorId)">
                      <img v-lazy="item.logo" alt class />
                      <span>{{ item.nickName }}</span>
                      <!-- </el-tooltip> -->
                    </div>
                  </td>
                  <td style="width: 101px">
                    {{ format_num(item.forecastVolume) }}
                  </td>
                  <td class="td3">{{ format_num(item.forecastSaleroom) }}</td>
                </tr>
              </tbody>
            </table>
            <div
              v-loading="loading02"
              v-if="loading02"
              class="loading loadingIndex"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
            ></div>
          </div>
          <div class="hotItem">
            <div class="titleLine titlelive">
              <span>实时直播爆品榜</span>
              <span @click="prodmore()">
                更多
                <img src="../assets/meng/morejt_03.png" alt />
              </span>
            </div>
            <table class="table01" v-if="!loading03">
              <thead>
                <tr>
                  <th>商品</th>
                  <th>近一小时销售额</th>
                  <th>直播价</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in liveproducts" :key="'live' + index">
                  <td class="td1">
                    <div class="avatorBox" @click="goPage(16, item.proId)">
                      <img v-lazy="item.proLogo" alt class="goodsIcon" />
                      <!-- <el-tooltip class="item"
                                  effect="light"
                                  :content="item.shopTitle"
                                  placement="top"
                                  popper-class="mytooltip"
                      :hide-after="2000">-->
                      <span>{{ item.proTitle }}</span>
                      <!-- </el-tooltip> -->
                    </div>
                  </td>
                  <td style="width: 101px">{{ format_num(item.sales) }}</td>
                  <td class="td3">{{ format_num(item.livePrice) }}</td>
                </tr>
              </tbody>
            </table>
            <div
              v-loading="loading03"
              v-if="loading03"
              class="loading loadingIndex"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
            ></div>
          </div>
          <!--  -->
        </div>
      </div>
      <!-- 直播流量数据 -->
      <div v-if="flow_rate.create_time" class="bgbox">
        <div class="index_title">
          <h3>实时直播流量数据</h3>
          <p>
            {{ timestamp(flow_rate.create_time, "Y-M-D h:m") }} (
            每10分钟更新一次 )
          </p>
        </div>
        <div class="numdata">
          <div class="dataBox">
            <div class="dataItem data1" @click="data1()">
              <p>{{ format_num(flow_rate.pro_room_count) }}</p>
              <p>
                带货直播场次
                <img src="../assets/meng/rightjiantou_03.png" />
              </p>
            </div>
            <!-- <div class="dataItem data1" @click="data1()">
              <p>{{ format_num(flow_rate.vistor_count) }}</p>
              <p>观看人次 <img src="../assets/meng/rightjiantou_03.png" /></p>
            </div>-->
            <div class="dataItem data1" @click="data1()">
              <p>{{ format_num(flow_rate.pro_line_count) }}</p>
              <p>
                在售商品数
                <img src="../assets/meng/rightjiantou_03.png" />
              </p>
            </div>
            <div class="dataItem" @click="data1()">
              <p>{{ format_num(flow_rate.volum) }}</p>
              <p>
                预估销量
                <img src="../assets/meng/rightjiantou_03.png" />
              </p>
            </div>
            <div class="dataItem" @click="data1()">
              <p>{{ format_num(flow_rate.sales) }}</p>
              <p>
                预估销售额
                <img src="../assets/meng/rightjiantou_03.png" />
              </p>
            </div>
            <!-- <div class="dataItem" @click="data1()">
              <p>{{ format_num(flow_rate.sound) }}</p>
              <p>音浪收入 <img src="../assets/meng/rightjiantou_03.png" /></p>
            </div>-->
          </div>
        </div>
      </div>
      <!-- 跳页 -->
      <div class="pageBox">
        <div class="pageItem" @click="goPage(1)">
          <img src="@/assets/wang/work/hotVideoIcon.png" alt />
          <p>正在直播</p>
        </div>
        <div class="pageItem" @click="goPage(2)">
          <img src="@/assets/wang/work/bpIcon.png" alt />
          <p>直播爆品</p>
        </div>
        <div class="pageItem" @click="goPage(3)">
          <img src="@/assets/wang/work/pieIcon.png" alt />
          <p>实时直播大盘</p>
        </div>
        <div class="pageItem" @click="goPage(4)">
          <img src="@/assets/wang/work/dhIcon.png" alt />
          <p>带货直播</p>
        </div>
        <div class="pageItem" @click="goPage(5)">
          <img src="@/assets/wang/work/shopCartIcon.png" alt />
          <p>带货视频</p>
        </div>
        <div class="pageItem" @click="goPage(6)">
          <img src="@/assets/wang/work/talentIcon.png" alt />
          <p>带货达人</p>
        </div>
        <div class="pageItem" @click="goPage(7)">
          <img src="@/assets/wang/work/hotGoods.png" alt />
          <p>热门商品</p>
        </div>
        <div class="pageItem" @click="goPage(8)">
          <img src="@/assets/wang/work/starTalent.png" alt />
          <p>星图达人</p>
        </div>
      </div>
      <!-- 智能分析 -->
      <div class="Inteanalysis">
        <!-- <p class="hotTitle">智能分析</p> -->
        <div class="index_title top100">
          <h3>智能分析</h3>
          <p>基于50+维度建立智能AI模型，涵盖数亿条数据分析结果</p>
        </div>
        <div class="boxcontainer">
          <div
            class="box"
            ref="refName"
            @mouseenter="changeAct(0)"
            :class="{ showClass: acts[0] == 1 }"
          >
            <div class="h4">
              <img src="@/assets/zhao/tit00.png" />
              <span>达人资源库</span>
            </div>
            <div class="moreshow syban00">
              <div class="h5">达人资源库</div>
              <p>
                智能大数据系统，精准数据定位，多行业整合，
                <br />海量优质达人资源，精准达人数据，多维度分析，
                <br />把控每个细节.
              </p>
              <a @click="Intellianalysis1()">查看详情</a>
            </div>
          </div>
          <div
            class="box"
            @mouseenter="changeAct(1)"
            :class="{ showClass: acts[1] == 1 }"
          >
            <div class="h4">
              <img src="@/assets/zhao/tit01.png" />
              <span>智能找商品</span>
            </div>
            <div class="moreshow syban01">
              <div class="h5">智能找商品</div>
              <p>
                达人数据库和商家资源数据结合，根据行业、
                <br />商品人群属性更精准匹配达人账号属性，
                <br />用智能大数据算法，让每一次曝光更精准
              </p>
              <!-- <a @click="Intellianalysis2()">查看详情</a> -->
              <a href="javascript:void(0)">敬请期待</a>
            </div>
          </div>
          <div
            class="box"
            @mouseenter="changeAct(2)"
            :class="{ showClass: acts[2] == 1 }"
          >
            <div class="h4">
              <img src="@/assets/zhao/tit02.png" />
              <span>智能找达人</span>
            </div>
            <div class="moreshow syban02">
              <div class="h5">智能找达人</div>
              <p>
                达人全覆盖，大数据智能任意匹配对接平台达人，
                <br />快速精准寻找合作达人，商家可以根据自身需求，
                <br />预算规划
              </p>
              <!-- <a @click="Intellianalysis3()">查看详情</a> -->
              <a href="javascript:void(0)">敬请期待</a>
            </div>
          </div>
          <div
            class="box"
            @mouseenter="changeAct(3)"
            :class="{ showClass: acts[3] == 1 }"
          >
            <div class="h4">
              <img src="@/assets/zhao/tit03.gif" />
              <span>账号诊断</span>
            </div>
            <div class="moreshow syban03">
              <div class="h5">账号诊断</div>
              <p>
                精准定位直播间，精简操作，一键找出现存问题，
                <br />为您排忧解难，助力成为“别人”的直播间， <br />快来体验吧！
              </p>
              <a @click="Intellianalysis4()">查看详情</a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <ul class="go_to_top">
      <li>
        <el-popover placement="right" trigger="hover">
          <div class="code_content">
            <div class="popper_arrow"></div>
            <div><img src="@/assets/shi/qq.png" />客服：983419919</div>
            <div>工作日：9:30--18:30</div>
          </div>
          <div slot="reference" class="message_index"></div>
        </el-popover>
      </li>
      <li>
        <el-popover placement="right" trigger="hover">
          <div class="message_content">
            <div class="popper_arrow"></div>
            <img
              src="@/assets/img/xiaozhushou_qr.jpg"
              style="margin-top: -4px"
            />
            <div>
              专属微信客服
              <span style="display: block; padding-top: 4px"
                >工作日：9:30--18:30</span
              >
            </div>
          </div>
          <div slot="reference" class="code"></div>
        </el-popover>
      </li>
      <li
        @mouseover="suggest = true"
        @mouseout="suggest = false"
        @click="complaint_is = true"
      >
        <div class="message_content">
          <img
            src="../assets/meng/suggest.png"
            alt
            class="suggest"
            v-if="!suggest"
          />
        </div>
        <div v-if="suggest" class="text" @click="complaint_is = true">
          投诉
          <br />建议
        </div>
      </li>
      <li style="height: 10px; background: transparent"></li>
      <li v-show="is_show_go_to_top">
        <div class="top" @click="backTop"></div>
      </li>
    </ul>

    <!-- 旧代码已经复制出来了，在joe桌面 -->

    <!-- 新的登录注册 -->
    <div class="login">
      <el-dialog
        :visible.sync="dialog"
        width="440px"
        top="22.5vh"
        class="dialogLoginBox"
        @close="closePOP02"
        :show-close="false"
        :lock-scroll="false"
        @open="opendialog()"
        :close-on-click-modal="false"
      >
        <div class="loginContainer">
          <div class="tabTitile">
            <span
              :class="{ active: active == 1 }"
              @mouseenter="hover02"
              @mouseleave="hover = 0"
              @click="loginCheckFn(1)"
              >账号密码登录</span
            >
            <span
              :class="{ active: active == 2 }"
              @mouseenter="hover01"
              @mouseleave="hover = 0"
              @click="loginCheckFn(2)"
              >短信登录/注册</span
            >
            <i :class="{ active: active == 2 }"></i>
          </div>
          <div class="tabContent" v-if="active == 1">
            <div class="inputItem">
              <div class="inputBox">
                <i class="phone"></i>

                <input
                  type="number"
                  v-model="phone_01"
                  placeholder="请输入手机号"
                  @blur="checkPhone_01"
                  @focus="
                    log_phone = false;
                    account = false;
                  "
                />
                <img
                  @mousedown="inpDelImg"
                  v-if="phone_01.length"
                  class="inpDelImg"
                  src="../assets/liu/inpDel.png"
                  alt
                />
              </div>

              <p class="errMsg" v-if="log_phone && phone_01">
                手机号格式错误,请重新输入
              </p>
              <p class="errMsg" v-if="log_phone && !phone_01">手机号不能为空</p>
            </div>
            <div class="inputItem">
              <div class="inputBox">
                <i class="password_02"></i>
                <input
                  :type="isPassword"
                  v-model="password_01"
                  @blur="password_text"
                  @focus="log_password = false"
                  @keydown="keydown($event)"
                  placeholder="请输入密码"
                  maxlength="16"
                  @keyup.enter="phone_login01()"
                />
                <img
                  @click="inpIsHide"
                  class="hide"
                  v-if="isHide && password_01"
                  src="../assets/liu/hide.png"
                  alt
                />
                <img
                  @click="inpIsHide"
                  class="hide"
                  v-if="!isHide && password_01"
                  src="../assets/liu/display.png"
                  alt
                />
              </div>
              <p class="errMsg" v-if="log_password && !password_01.length">
                密码不能为空
              </p>
              <p class="errMsg" v-if="log_password && password_01.length">
                提示密码由8-16位字母，数字或符号两种组合而成
              </p>
              <!-- <p class="errMsg" v-if="log_password">密码错误</p>
              <p class="errMsg" v-if="account">账号或密码错误</p>-->
            </div>
            <div
              class="vx_box"
              :class="{ is_top: errMsg == 4 || account }"
              style="justify-content: space-between"
            >
              <div style="display: flex; align-items: center">
                <img
                  src="../assets/li/VX.png"
                  alt
                  class="VX"
                  @click="vx_login"
                />
                <span @click="vx_login">微信扫码登录</span>
              </div>
              <div
                class="forget"
                @click="
                  forget_is = true;
                  dialog = false;
                "
              >
                忘记密码？
              </div>
            </div>
            <div class="loginFooter">
              <button @click="phone_login01()">登录</button>
              <p>
                登录即同意
                <span @click="go_to_page01('服务条款')" btn>服务条款</span> 和
                <span @click="go_to_page01('隐私条款')" btn>隐私条款</span>
              </p>
            </div>
          </div>

          <div class="tabContent" v-if="active == 2">
            <div class="inputItem">
              <div class="inputBox">
                <i class="phone"></i>

                <input
                  type="number"
                  v-model="phone"
                  placeholder="请输入手机号"
                  @blur="checkPhone"
                  @focus="note_phone = false"
                />
                <img
                  @mousedown="phone = ''"
                  v-if="phone.length"
                  class="inpDelImg"
                  src="../assets/liu/inpDel.png"
                  alt
                />
              </div>

              <p class="errMsg" v-if="note_phone && phone">
                手机号格式错误,请重新输入
              </p>
              <p class="errMsg" v-if="note_phone && !phone">手机号不能为空</p>
            </div>
            <div
              class="inputItem clear"
              :style="{ marginTop: note_phone ? '5px' : '19px' }"
            >
              <div class="inputBox passwordBox">
                <i class="password"></i>
                <input
                  v-model="code"
                  @blur="checkCode"
                  @focus="
                    note_code = false;
                    note_code_02 = false;
                    getCode = false;
                  "
                  placeholder="请输入验证码"
                  @keydown.enter="affirm_password_02()"
                />
              </div>
              <button
                class="codeBtn"
                @mousedown="get_code()"
                :class="{ timering: isTimering }"
              >
                <span>{{ time }}</span>
              </button>
              <p
                class="psdErrMsg errMsg"
                v-if="getCode && !code.length && this.time != '获取验证码'"
              >
                验证码不能为空
              </p>
              <p
                class="psdErrMsg errMsg"
                v-if="note_code && code.length && this.time != '获取验证码'"
              >
                验证码格式错误
              </p>
              <p
                class="psdErrMsg errMsg"
                v-if="note_code && this.time == '获取验证码'"
              >
                请先获取验证码
              </p>
              <!-- <p class="psdErrMsg errMsg" v-if="note_code_02">验证码不正确</p> -->
            </div>
            <div
              class="inputItem"
              :class="{ is_password: note_code || note_code_02 || getCode }"
              v-if="register"
            >
              <div class="inputBox">
                <i class="password_02"></i>

                <input
                  :type="newPassword"
                  v-model="import_password"
                  placeholder="请输入8-16位数字和字母或符号组成的密码"
                  @blur="checkPassword"
                  @keydown="keydown($event)"
                  @focus="errMsg_01 = false"
                  maxlength="16"
                />
                <img
                  @click="pawIsHideClick"
                  class="hide"
                  v-if="wjIsHide && import_password"
                  src="../assets/liu/hide.png"
                />
                <img
                  @click="pawIsHideClick"
                  class="hide"
                  src="../assets/liu/display.png"
                  v-if="!wjIsHide && import_password"
                />
              </div>

              <p class="errMsg" v-if="errMsg_01 && import_password.length">
                密码必须由8-16位数字、字母或符号(至少两种)组成
              </p>
              <p class="errMsg" v-if="emptyL">密码不能为空</p>
            </div>
            <div class="inputItem" v-if="register">
              <div class="inputBox">
                <i class="password_02"></i>

                <input
                  :type="newPassword1"
                  v-model="import_password02"
                  @keydown="keydown($event)"
                  placeholder="请再次输入密码"
                  @blur="affirm_password"
                  @focus="affirm_password_111"
                  maxlength="16"
                  @keyup.enter="affirm_password_02()"
                />
                <img
                  @click="pawIsHideClick1"
                  class="hide"
                  v-if="wjIsHide1 && import_password02"
                  src="../assets/liu/hide.png"
                />
                <img
                  @click="pawIsHideClick1"
                  class="hide"
                  v-if="!wjIsHide1 && import_password02"
                  src="../assets/liu/display.png"
                />
              </div>

              <p class="errMsg" v-if="errMsg == 4">
                两次输入的密码不一致，请重新输入
              </p>
            </div>
            <div
              class="vx_box"
              :class="{
                is_top: errMsg == 4,
                is_top_vx: note_code || note_code_02 || getCode,
              }"
            >
              <img src="../assets/li/VX.png" alt class="VX" @click="vx_login" />
              <span @click="vx_login">微信扫码登录</span>
            </div>

            <div class="loginFooter">
              <button @click="affirm_password_02()">登录/注册</button>
              <p>
                登录即同意
                <span @click="go_to_page01('服务条款')" btn>服务条款</span> 和
                <span @click="go_to_page01('隐私条款')" btn>隐私条款</span>
              </p>
            </div>
          </div>

          <img
            src="@/assets/wang/video/close.png"
            alt
            class="close"
            @click="close"
          />
        </div>
      </el-dialog>
    </div>

    <!-- 微信登录 -->
    <div class="login">
      <el-dialog
        :visible.sync="vx_is"
        width="440px"
        top="22.5vh"
        class="dialog02"
        :lock-scroll="false"
        :show-close="false"
      >
        <div class="tabContentwxCode">
          <div class="vx_box">微信扫码登录</div>
          <div v-if="loading" class="imgLoadding">
            <div v-loading="loading" class="loadingInner"></div>
          </div>
          <div v-else>
            <img :src="wx_code" class="ewmImg" />
            <p class="wechatTip">
              <img src="@/assets/li/VX.png" class="wechatIcon" />
              <span>微信扫码，关注公众号后即可登录/注册</span>
            </p>
          </div>
          <img
            src="@/assets/wang/video/close.png"
            alt
            class="close"
            @click="clone2"
          />
        </div>
      </el-dialog>
    </div>
    <!-- 忘记，密码 -->
    <div class="login">
      <el-dialog
        :visible.sync="forget_is"
        width="440px"
        top="22.5vh"
        class="dialogLoginBox"
        :show-close="false"
        :lock-scroll="false"
        @open="opendialog()"
      >
        <div class="loginContainer">
          <div class="vx_box02">忘记密码</div>
          <div class="tabContent">
            <div class="inputItem" style="margin-top: 37px">
              <div class="inputBox">
                <i class="phone"></i>

                <input
                  type="number"
                  v-model="phone_forget"
                  placeholder="请输入手机号"
                  @blur="checkPhone_forget"
                  @focus="
                    phone_format = false;
                    isShow_num = false;
                    isShow_user = false;
                  "
                />
                <img
                  @mousedown="phone_forget = ''"
                  v-if="phone_forget.length"
                  class="inpDelImg"
                  src="../assets/liu/inpDel.png"
                  alt
                />
              </div>

              <p class="errMsg" v-if="phone_format && !phone_forget.length">
                手机号不能为空
              </p>
              <p class="errMsg" v-if="phone_format && phone_forget">
                手机号格式错误,请重新输入
              </p>
              <!-- <p class="errMsg" v-if="isShow_user">用户信息不存在</p>
              <p class="errMsg" v-if="isShow_num">参数不正确</p>-->
            </div>
            <div class="inputItem clear" :class="{ is_top: errMsg == 7 }">
              <div class="inputBox passwordBox">
                <i class="password"></i>
                <input
                  v-model="code_01"
                  @blur="checkCode_01"
                  @focus="
                    isShow_code = false;
                    isShow_code_01 = false;
                  "
                  @keydown="keydown($event)"
                  placeholder="请输入验证码"
                  @keyup.enter="phone_login()"
                />
              </div>
              <button
                class="codeBtn"
                @mousedown="get_code_01()"
                :class="{ timering: isTimering }"
              >
                <span>{{ time }}</span>
              </button>
              <p
                class="psdErrMsg errMsg"
                v-if="
                  isShow_code_01 &&
                  code_01.length &&
                  code_01.length != 6 &&
                  time != '获取验证码'
                "
              >
                验证码格式错误
              </p>
              <p
                class="psdErrMsg errMsg"
                v-if="isShow_code_01 && !code_01.length && time != '获取验证码'"
              >
                验证码不能为空
              </p>
              <p
                class="psdErrMsg errMsg"
                v-if="isShow_code_01 && time == '获取验证码'"
              >
                请先获取验证码
              </p>
              <!-- <p class="psdErrMsg errMsg" v-if="isShow_code">验证码不正确</p> -->
            </div>
            <div
              class="inputItem"
              :class="{ is_top_02: isShow_code || isShow_code_01 }"
            >
              <div class="inputBox">
                <i class="password_02"></i>

                <input
                  :type="wjPassword"
                  v-model="forget_password"
                  placeholder="请输入8-16位数字和字母或符号组成的密码"
                  @blur="forgetPassword"
                  @keydown="keydown($event)"
                  maxlength="16"
                  @focus="one_password = false"
                />
                <img
                  @click="wjInpIsHide"
                  class="hide"
                  v-if="wjIsHide && forget_password"
                  src="../assets/liu/hide.png"
                  alt
                />
                <img
                  @click="wjInpIsHide"
                  class="hide"
                  v-if="!wjIsHide && forget_password"
                  src="../assets/liu/display.png"
                  alt
                />
              </div>

              <p class="errMsg" v-if="one_password">
                密码必须由8-16位数字、字母或符号(至少两种)组成
              </p>
            </div>
            <div class="inputItem" :class="{ is_top: errMsg == 9 }">
              <div class="inputBox">
                <i class="password_02"></i>

                <input
                  :type="wjPassword1"
                  v-model="forget_password_02"
                  placeholder="请再次输入密码"
                  @blur="forgetPassword_02"
                  @keydown="keydown($event)"
                  maxlength="16"
                  @focus="errMsg = 0"
                  @keyup.enter="phone_login_01()"
                />
                <img
                  @click="wjInpIsHide1"
                  class="hide"
                  v-if="wjIsHide1 && forget_password_02"
                  src="../assets/liu/hide.png"
                  alt
                />
                <img
                  @click="wjInpIsHide1"
                  class="hide"
                  v-if="!wjIsHide1 && forget_password_02"
                  src="../assets/liu/display.png"
                  alt
                />
              </div>

              <p class="errMsg" v-if="errMsg == 10">
                与第一次密码不一致，请重新输入
              </p>
            </div>

            <div class="loginFooter">
              <button @click="phone_login_01()">完成</button>
              <p>
                登录即同意
                <span @click="go_to_page01('服务条款')" btn>服务条款</span> 和
                <span @click="go_to_page01('隐私条款')" btn>隐私条款</span>
              </p>
            </div>
          </div>

          <img
            src="@/assets/wang/video/close.png"
            alt
            class="close"
            @click="
              forget_is = false;
              dialog = true;
            "
          />
        </div>
      </el-dialog>
    </div>
    <!-- 绑定手机弹窗 -->
    <div class="login">
      <el-dialog
        :visible.sync="bindPhonePop"
        width="500px"
        top="20vh"
        class="dialog02"
        :lock-scroll="false"
        :show-close="false"
        @open="opendialog()"
      >
        <!-- <section class="bindPhone part02">
          <p class="titleText">绑定手机号</p>
          <div class="d1">
            <p>+86</p>
            <el-input
              type="number"
              clearable
              v-model="phone"
              placeholder="请输入手机号"
              @blur="checkPhone(1)"
              @focus="errMsg = 0"
              :class="{ errBorder: errMsg == 1 }"
            ></el-input>
          </div>
          <div class="d2">
            <el-input
              v-model="code"
              @focus="checkPhone(1)"
              :class="{ errBorder: errMsg == 2 }"
              placeholder="请输入验证码"
              @keyup.enter.native="confirmBtn()"
            ></el-input>
            <button @click="get_code(1)">
              <span>{{ time }}</span>
            </button>
          </div>
          <p class="errMsg" v-if="errMsg == 1">*手机号格式错误</p>
          <p class="errMsg" v-if="errMsg == 2">*验证码错误</p>
          <p class="errMsg" v-if="errMsg == 3">
            *该手机号已被绑定，请变更号码或<span
              @click="
                bindPhonePop = false;
                dialog = true;
                active = 1;
              "
              >直接短信登录</span
            >
          </p>
          <button
            class="loginBtn"
            :class="{ active_btn: phone.length == 11 && code.length == 6 }"
            @click="confirmBtn"
          >
            确定
          </button>
        </section>-->
        <div class="loginContainer">
          <div class="vx_box02">绑定手机号</div>
          <div class="tabContent">
            <div class="inputItem">
              <div class="inputBox">
                <i class="phone"></i>

                <input
                  type="number"
                  v-model="phone"
                  placeholder="请输入手机号"
                  @blur="checkPhone()"
                  @focus="
                    note_phone = false;
                    note_code_03 = false;
                  "
                  @keydown.enter="confirmBtn()"
                />
                <img
                  @mousedown="inpDelPhone"
                  v-if="phone.length"
                  class="inpDelImg"
                  src="../assets/liu/inpDel.png"
                  alt
                />
              </div>

              <p class="errMsg" v-if="note_phone && phone">
                手机号格式错误,请重新输入
              </p>
              <p class="errMsg" v-if="note_phone && !phone">手机号不能为空</p>
              <!-- <p class="errMsg" v-if="note_code_03">该手机号已被绑定，请变更号码</p> -->
            </div>
            <div
              class="inputItem clear"
              :style="{ marginTop: note_phone ? '5px' : '19px' }"
            >
              <div class="inputBox passwordBox">
                <i class="password"></i>
                <input
                  v-model="code"
                  @blur="checkCode"
                  @focus="
                    note_code = false;
                    note_code_02 = false;
                    note_getCode = false;
                    note_err = false;
                  "
                  placeholder="请输入验证码"
                  @keydown.enter="confirmBtn()"
                />
              </div>
              <button
                class="codeBtn"
                @mousedown="get_code()"
                :class="{ timering: isTimering }"
              >
                <span>{{ time }}</span>
              </button>

              <p
                class="psdErrMsg errMsg"
                v-if="note_getCode && time == '获取验证码'"
              >
                请先获取验证码
              </p>
              <p
                class="psdErrMsg errMsg"
                v-if="
                  note_code &&
                  code.length != 6 &&
                  code.length != 0 &&
                  time != '获取验证码'
                "
              >
                验证码格式错误
              </p>
              <p
                class="psdErrMsg errMsg"
                v-if="note_code && !code.length && time != '获取验证码'"
              >
                验证码不能为空
              </p>
            </div>
            <div
              class="inputItem"
              :class="{ is_password: note_code || note_code_02 }"
              v-if="register"
            >
              <div class="inputBox">
                <i class="password_02"></i>

                <input
                  :type="bdPassword"
                  v-model="import_password"
                  placeholder="请输入8-16位数字和字母或符号组成的密码"
                  @blur="checkPassword"
                  @keydown="keydown($event)"
                  @focus="errMsg_01 = false"
                  maxlength="16"
                />
                <img
                  @click="bdInpIsHide"
                  class="hide"
                  v-if="bdIsHide && import_password"
                  src="../assets/liu/hide.png"
                  alt
                />
                <img
                  @click="bdInpIsHide"
                  class="hide"
                  v-if="!bdIsHide && import_password"
                  src="../assets/liu/display.png"
                  alt
                />
              </div>

              <p class="errMsg" v-if="errMsg_01">
                密码必须由8-16位数字、字母或符号(至少两种)组成
              </p>
            </div>
            <div class="inputItem" v-if="register">
              <div class="inputBox">
                <i class="password_02"></i>

                <input
                  :type="bdPassword1"
                  v-model="import_password02"
                  @keydown="keydown($event)"
                  placeholder="请再次输入密码"
                  @blur="affirm_password"
                  @focus="affirm_password_111"
                  maxlength="16"
                  @keyup.enter="confirmBtn(1)"
                />
                <img
                  @click="bdInpIsHide1"
                  class="hide"
                  v-if="bdIsHide1 && import_password02"
                  src="../assets/liu/hide.png"
                  alt
                />
                <img
                  @click="bdInpIsHide1"
                  class="hide"
                  v-if="!bdIsHide1 && import_password02"
                  src="../assets/liu/display.png"
                  alt
                />
              </div>

              <p class="errMsg" v-if="errMsg == 4">
                两次输入的密码不一致，请重新输入
              </p>
            </div>

            <div class="loginFooter">
              <button @mousedown="confirmBtn()">确定</button>
              <p>
                登录即同意
                <span @click="go_to_page01('服务条款')" btn>服务条款</span> 和
                <span @click="go_to_page01('隐私条款')" btn>隐私条款</span>
              </p>
            </div>
          </div>

          <img
            src="@/assets/wang/video/close.png"
            alt
            class="close"
            @click="
              bindPhonePop = false;
              dialog = true;
            "
          />
        </div>
      </el-dialog>
    </div>
    <!-- 智能分析弹窗 -->
    <!-- <el-dialog
      :visible="analysisPop"
      width="935px"
      height="527px"
      top="20vh"
      class="dialog02 analysis_pop"
    >
      <el-carousel height="527px">
        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
          <div class="carouselItemBox">
            <img :src="item.img" alt class="bannerImg" />
            <button class="useNowBtn" @click="useNow(index)">立即体验</button>
            <img src="../assets/li/close.png" alt class="close" @click="closeAnalysis" />
          </div>
        </el-carousel-item>
      </el-carousel>
    </el-dialog>-->
    <!-- 投诉建议 -->
    <div class="complaint">
      <el-dialog
        :visible.sync="complaint_is"
        width="690px"
        top="22.5vh"
        class="dialogLoginBox"
        :show-close="false"
        @open="complaint()"
      >
        <div class="complaint_box">
          <div class="box">
            <p></p>
            <p>投诉建议</p>
          </div>
          <div class="content">
            <div class="link_box">
              <div class="link">
                <p><span>*</span> 投诉链接</p>
                <input
                  type="text"
                  :class="{ err: link_err }"
                  v-model="link"
                  @focus="
                    link_hint = false;
                    link_err = false;
                  "
                />
              </div>
              <div class="err_box">
                <p class="err_hint" v-if="link_hint">请输入投诉链接</p>
              </div>
            </div>
            <div class="link_box">
              <div class="link">
                <p><span>*</span> 投诉原因</p>
                <el-select
                  v-model="value_cause"
                  placeholder="请选择投诉原因"
                  :popper-append-to-body="false"
                  @focus="cause_hint = false"
                  @blur="blur_cause"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
              <div class="err_box">
                <p class="err_hint" v-if="cause_hint">请选择投诉原因</p>
              </div>
            </div>
            <div class="link_box">
              <div class="link">
                <p><span>*</span> 详细说明</p>
                <el-input
                  type="textarea"
                  placeholder
                  v-model="textarea"
                  resize="none"
                  @focus="text_err()"
                ></el-input>
              </div>
              <div class="err_box">
                <p class="err_hint" v-if="text_hint">请输入详细说明</p>
              </div>
            </div>
            <div class="link_box">
              <div class="link">
                <p><span>*</span> 联系邮箱</p>
                <input
                  type="text"
                  :class="{ err: mail_err }"
                  v-model="mail"
                  placeholder="留下您的联系邮箱，以便我们将处理结果通知给您，我们会严格保密。"
                  @focus="
                    mail_hint = false;
                    mail_err = false;
                  "
                />
              </div>
              <div class="err_box">
                <p class="err_hint" v-if="mail_hint">请输入联系邮箱</p>
              </div>
            </div>
            <button @click="submit()">提交</button>
          </div>
          <img
            src="@/assets/wang/video/close.png"
            class="close"
            @click="complaint_is = false"
          />
        </div>
      </el-dialog>
    </div>
    <!-- 首页活动弹窗 -->
    <!-- <div class="login">
      <el-dialog
        :visible.sync="showActivityPopup"
        width="935px"
        top="20vh"
        class="dialog02"
        :show-close="false"
        @open="opendialog()"
      >
        <div class="activity_popup">
          <div class="ap_clone" @click="showActivityPopup=false">
            <img src="@/assets/shi/close.png" alt="">
          </div>
          <div class="ap_look_details">查看详情</div>
        </div>
      </el-dialog>
    </div>-->
  </div>
</template>

<script>
import UserInfoPop from "@/component/UserInfoPop.vue";
import md5 from "js-md5";
import logo from "@/component/logoIndex.vue";
import { setInterval, clearInterval } from "timers";
import SvipPopup from "@/pages/shi/homeComponent/SvipPopup.vue";
export default {
  name: "index",
  components: { logo, SvipPopup,UserInfoPop },
  data() {
    return {
      emptyL: false,
      oldUsers: false, //老用户
      bdIsHide: false,
      bdIsHide1: false,
      pawIsHide: false,
      pawIsHide1: false,
      wjIsHide: false,
      wjIsHide1: false,
      isPassword: "password",
      wjPassword: "password",
      wjPassword1: "password",
      newPassword: "password",
      newPassword1: "password",
      bdPassword: "password",
      bdPassword1: "password",
      isHide: false,
      delInp: false,
      navShowTime: 100,
      navHideTime: 100,
      // 绑定手机号
      phone_binding: "",
      show_binding: false,
      binding_user: false,
      binding_num: false,
      code_binding: "",
      binding_code_01: false,
      binding_code: false,
      pic1: "@/assets/zhao/nav01.png",
      pic11: "@/assets/zhao/hnav01.png",
      analysisPop: true,
      loop: 0,
      is_login: false,
      is_show_go_to_top: false,
      active: 1, //短信1 扫码2
      act: 0,
      acts: [1, -1, -1, -1],
      dialog: false,
      phone: "",
      code: "",
      time: "获取验证码",
      loopTime: 0,
      cancel01: null,
      cancel02: null,
      cancel03: null,
      cancel04: null,
      cancel05: null,
      cancel06: null,
      wx_code: "",
      photo: "",
      person_message: null,
      hover: 0, //0:没有鼠标经过 1:鼠标经过
      bindPhonePop: false,
      errMsg: 0, //0 1:手机号格式不对 2：验证码格式不对 3 手机号已经被绑定
      sessionId: "",
      loading: true,
      searchType: "达人",
      keywords: "",
      flow_rate: {}, //上数据
      fansList: [],
      salesList: [],
      liveList: [],
      star_map: [],
      volume: [],
      liveproducts: [],
      loading01: true,
      loading02: true,
      loading03: true,
      activeIndex: "1",
      routerName: "",
      placeholder: "请输入抖音昵称或抖音号进行搜索",
      bannerList: [
        {
          img: require("../assets/wang/work/banner1.png"),
        },
        {
          img: require("../assets/wang/work/banner2.png"),
        },
      ],
      isTimering: false, //是否正在倒计时（用来区别展示倒计时的文字样式）
      isShow: false, // 控制搜素框显示隐藏
      search_wen: [], // 搜索记录保存
      vx_is: false, //微信登陆弹窗
      register: false, //注册时的密码框
      import_password: "", //注册时的密码
      import_password02: "", //确认密码
      phone_01: "",
      password_01: "",
      forget_is: false,
      phone_forget: "", //忘记密码手机号
      code_01: "", //忘记密码时的验证码
      forget_password: "", //忘记密码时的密码
      forget_password_02: "",
      note_phone: false,
      note_code: false,
      log_phone: false,
      log_password: false,
      errMsg_01: false,
      isShow_user: false,
      isShow_code: false,
      isShow_code_01: false,
      isShow_num: false,
      note_code_02: false,
      account: false,
      phone_format: false,
      one_password: false,
      note_code_03: false,
      getCode: false,
      note_getCode: false,
      SVipType: 0, //是否显示活动弹窗
      SVipLevel: 0,
      showActivityPopup: false, //活动弹窗控件
      note_err: false,
      // 投诉建议
      // 鼠标滑上显示投诉建议
      suggest: false,
      complaint_is: false,
      options: [
        {
          value: "1",
          label: "意见反馈",
        },
        {
          value: "2",
          label: "侵权",
        },
        {
          value: "3",
          label: "政治敏感",
        },
        {
          value: "4",
          label: "暴恐血腥",
        },
        {
          value: "5",
          label: "赌博",
        },
        {
          value: "6",
          label: "谣言",
        },
        {
          value: "7",
          label: "隐私泄露",
        },
        {
          value: "8",
          label: "其他 ",
        },
      ],
      value_cause: "",
      textarea: "",
      link: "",
      mail: "",
      link_hint: false,
      link_err: false,
      cause_hint: false,
      text_hint: false,
      mail_hint: false,
      mail_err: false,
      // isSticker: true, //首页活动贴纸
      PcBanner: "", // banner 图片
      bilateralBanner: null, //  活动两侧浮动图片
    };
  },
  watch: {
    searchType: function (newVal, oldVal) {
      if (newVal == "达人") {
        this.placeholder = "请输入抖音昵称或抖音号进行搜索";
      } else if (newVal == "商品") {
        this.placeholder = "请输入商品标题或关键词进行搜索";
      } else if (newVal == "直播间") {
        this.placeholder = "请输入直播间名称或达人名称进行搜索";
      }
    },
    // is_login(newVal) {
    //   if (newVal) {
    //     this.$axios.get("/api/customer/getVipActive").then((res) => {
    //       this.SVipType = res.data.data.type;
    //       this.SVipLevel = res.data.data.level;
    //       // 活动弹窗 是第一次打开  并且是 type = 1 ， 7天后的老用户
    //       // let isPop = localStorage.getItem('huoDongPopup');
    //       // if (!isPop && res.data.data.type == 3) {  //老用户每次登录进来都要弹出活动弹框
    //       //   this.$store.commit("huoDongPopup", true);
    //       //   localStorage.setItem('huoDongPopup',1);
    //       // }
    //     });
    //   }
    // },
    value_cause() {
      if (this.value_cause) {
        this.cause_hint = false;
        let input = document.querySelectorAll(".el-input__inner");
        input[1].style.borderColor = "#e5e5e5";
      }
    },
    // app.vue活动弹框需要调用登录界面
    "$store.state.isPopLoginBox": function (newValue, oldValue) {
      this.active = 1;
      this.dialog = newValue;
    },
  },
  filters: {
    filtLevelName(level) {
      let name = "";
      if (level == 0) {
        name = "免费版";
      } else if (level == 1) {
        name = "SVIP";
      } else if (level == 2) {
        name = "Plus";
      } else if (level == 3) {
        name = "体验版";
      } else if (level == 4) {
        name = "VIP";
      }
      return name;
    },
  },
  created() {
    // 弹窗
    if (localStorage.getItem("analysisPop")) {
      if (localStorage.getItem("analysisPop") == "false") {
        this.analysisPop = false;
      } else {
        this.analysisPop = true;
      }
    }
    if (localStorage.getItem("photo")) {
      this.photo = localStorage.getItem("photo");
    } else {
      this.photo = "";
    }
    if (localStorage.getItem("user_id")) {
      this.is_login = true;
      this.get_person();
    } else {
      this.is_login = false;
    }
    this.$watch("dialog", (newValue, oldValue) => {
      clearInterval(this.loop);
      this.loop = null;
    });
    this.$watch("active", (newValue, oldValue) => {
      if (this.active == 1) {
        clearInterval(this.loop);
        this.loop = null;
      }
    });

    this.getbenner(); // banner 图片
    this.getBilateralBanner(); // 两侧活动浮动图片
    this.getLiveFlowTrend();
    this.getFansRank();
    this.getSales();
    this.getLiveRank();
    this.star_map04();
    this.volume05();
    this.liveproducts06();
    // document.addEventListener('click',e=>{
    //   if(this.$refs.showRef){
    //     let isSelf = this.$refs.showRef.contains(e.target);
    //     if (!isSelf) {
    //       this.isShow = false;
    //     }
    //   }
    // })
  },
  mounted() {
    this.dialog = this.$store.state.register;
    // console.log(this.$store.state.register);
    // if (this.$store.state.register) {
    //   this.active = 2;
    // }
    window.addEventListener("scroll", this.scrollToTop);
  },
  destroyed() {
    clearInterval(this.loop);
    this.loop = null;
    window.removeEventListener("scroll", this.scrollToTop);
  },
  methods: {
    
    bannerLink(item) {
      let uid = localStorage.getItem("user_id");
      if (uid) {
        if (item.url) {
          // window.open(item.url,'_blank');
          location.href = item.url+'?showTip='+true;
        }
      } else {
        let loginedUrl = "/talent_main/buy";
        this.$store.commit("isPopLoginBox", true);
        this.$store.commit("loginedUrl", loginedUrl);
      }
    },
    bdInpIsHide() {
      this.bdIsHide = !this.bdIsHide;
      if (this.bdIsHide) {
        this.bdPassword = "text";
      } else {
        this.bdPassword = "password";
      }
    },
    bdInpIsHide1() {
      this.bdIsHide1 = !this.bdIsHide1;
      if (this.bdIsHide1) {
        this.bdPassword1 = "text";
      } else {
        this.bdPassword1 = "password";
      }
    },
    inpDelPhone() {
      this.phone = "";
    },
    // 显示隐藏
    pawIsHideClick() {
      this.wjIsHide = !this.wjIsHide;
      if (this.wjIsHide) {
        this.newPassword = "text";
      } else {
        this.newPassword = "password";
      }
    },
    pawIsHideClick1() {
      this.wjIsHide1 = !this.wjIsHide1;
      if (this.wjIsHide1) {
        this.newPassword1 = "text";
      } else {
        this.newPassword1 = "password";
      }
    },
    wjInpIsHide() {
      this.wjIsHide = !this.wjIsHide;
      if (this.wjIsHide) {
        this.wjPassword = "text";
      } else {
        this.wjPassword = "password";
      }
    },
    wjInpIsHide1() {
      this.wjIsHide1 = !this.wjIsHide1;
      if (this.wjIsHide1) {
        this.wjPassword1 = "text";
      } else {
        this.wjPassword1 = "password";
      }
    },
    inpIsHide() {
      this.isHide = !this.isHide;
      if (this.isHide) {
        this.isPassword = "text";
      } else {
        this.isPassword = "password";
      }
    },
    inpDelImg() {
      // debugger;
      this.phone_01 = "";
    },
    vipActivity() {
      this.$store.commit("huoDongPopup", true);
    },
    freeGetVip() {
      this.$store.commit("getSvipPopup", true);
    },
    close() {
      this.dialog = false;
      this.$store.commit("isPopLoginBox", false);
      this.$store.commit("loginedUrl", "");
    },
    // 头部的跳转（判断是否登录）
    toEdit(type) {
      let router;
      if (type === 0) {
        router = this.$router.resolve({
          path: `/talent_main/fans_main`,
        });
      }
      if (type === 1) {
        router = this.$router.resolve({
          path: `/talent_main/fans_main?input_btn=行业排行榜`,
        });
      }
      if (type === 2) {
        router = this.$router.resolve({
          path: `/talent_main/fans_main?input_btn=地区排行榜`,
        });
      }
      if (type === 3) {
        router = this.$router.resolve({
          path: `/talent_main/fans_main?input_btn=蓝V认证榜`,
        });
      }
      if (type === 4) {
        //星图达人榜
        router = this.$router.resolve({
          path: `/talent_main/star_map`,
        });
      }
      if (type === 5) {
        //短视频达人榜
        router = this.$router.resolve({
          path: `/talent_main/star_map`,
        });
      }
      if (type === 6) {
        //短视频达人榜
        router = this.$router.resolve({
          path: `/talent_main/star_map?input_btn=直播达人榜`,
        });
      }
      if (type === 7) {
        //商品榜
        router = this.$router.resolve({
          path: `/talent_main/goodsListRoot`,
        });
      }
      if (type === 8) {
        router = this.$router.resolve({
          path: `/talent_main/goodsListRoot`,
        });
      }
      if (type === 9) {
        router = this.$router.resolve({
          path: `/talent_main/goodsListRoot?tabName=销量榜&rankKind=全网销量榜`,
        });
      }
      if (type === 10) {
        //  带货视频榜
        router = this.$router.resolve({
          path: `/talent_main/videoListRoot`,
        });
      }
      if (type === 11) {
        // 飙升榜
        router = this.$router.resolve({
          path: `talent_main/videoListRoot`,
        });
      }
      if (type === 12) {
        router = this.$router.resolve({
          path: `/talent_main/videoListRoot?input_btn=热评榜`,
        });
      }
      if (type === 13) {
        //实时直播大厅
        router = this.$router.resolve({
          path: `/talent_main/bring_goods`,
        });
      }
      if (type === 114) {
        router = this.$router.resolve({
          path: `/talent_main/bring_goods?input_btn=直播小时榜`,
        });
      }
      if (type === 115) {
        router = this.$router.resolve({
          path: `/talent_main/bring_goods?input_btn=直播带货榜`,
        });
      }
      if (type === 116) {
        router = this.$router.resolve({
          path: `/talent_main/bring_goods?input_btn=直播人气榜`,
        });
      }
      if (type === 16) {
        // 直播爆品榜
        router = this.$router.resolve({
          path: `/talent_main/explosiveProRoot`,
        });
      }
      if (type === 17) {
        router = this.$router.resolve({
          path: `/talent_main/explosiveProRoot`,
        });
      }
      if (type === 18) {
        router = this.$router.resolve({
          path: `/talent_main/explosiveProRoot?input_btn=历史直播爆品榜`,
        });
      }
      if (type === 19) {
        //  直播达人榜
        router = this.$router.resolve({
          path: `/talent_main/live_talent`,
        });
      }
      if (type === 20) {
        //  直播达人榜（！）
        router = this.$router.resolve({
          path: `/talent_main/live_talent`,
        });
      }
      if (type === 21) {
        //  音浪
        router = this.$router.resolve({
          path: `/talent_main/live_talent?input_btn=音浪收入榜`,
        });
      }
      if (type === 22) {
        //  土豪打赏榜
        router = this.$router.resolve({
          path: `/talent_main/live_talent?input_btn=土豪打赏榜`,
        });
      }
      if (type === 23) {
        //  直播分享榜
        router = this.$router.resolve({
          path: `/talent_main/live_talent?input_btn=直播分享榜`,
        });
      }

      if (type === 66) {
        //  达人销量榜
        router = this.$router.resolve({
          path: `/talent_main/talentSalesList`,
        });
      }
      if (type === 88) {
        //  抖音小店排行榜
        router = this.$router.resolve({
          path: `/talent_main/shopList`,
        });
      }
      if (this.is_login) {
        // window.open(router.href, '_self');
        // console.log(router);
        this.$router.push(router.route);
      } else {
        this.routerName = router.route.path;
        this.login_register();
      }
    },
    // 判断是否为登录的状态{直播流量数据前5个}
    data1() {
      if (this.is_login == true) {
        let router = this.$router.resolve({
          path: `/talent_main/liveTrafficMarket`,
        });
        window.open(router.href, "_blank");
      } else {
        this.login_register();
      }
    },
    // 判断是否为登录的状态{达人排行榜更多}
    talentmore() {
      if (this.is_login == true) {
        let router = this.$router.resolve({
          path: `/talent_main/fans_main`,
        });
        window.open(router.href, "_blank");
      } else {
        this.login_register();
      }
    },
    // 商品排行
    goodsmore() {
      if (this.is_login == true) {
        let router = this.$router.resolve({
          path: `/talent_main/goodsListRoot`,
        });
        window.open(router.href, "_blank");
      } else {
        this.login_register();
      }
    },
    //直播排行
    livemore() {
      if (this.is_login == true) {
        let router = this.$router.resolve({
          path: `/talent_main/liveGoodsRank`,
        });
        window.open(router.href, "_blank");
      } else {
        this.login_register();
      }
    },
    // 判断是否登录{直播达人榜}
    volumemore() {
      if (this.is_login == true) {
        let router = this.$router.resolve({
          path: `/talent_main/live_talent`,
        });
        window.open(router.href, "_blank");
      } else {
        this.login_register();
      }
    },
    // 判断是否登录{实时直播爆品榜}
    prodmore() {
      if (this.is_login == true) {
        let router = this.$router.resolve({
          path: `/talent_main/explosiveProRoot`,
        });
        window.open(router.href, "_blank");
      } else {
        this.login_register();
      }
    },
    // 判断是否登录{星图达人}
    starmap() {
      if (this.is_login == true) {
        let router = this.$router.resolve({
          path: `/talent_main/star_map`,
        });
        window.open(router.href, "_blank");
      } else {
        this.login_register();
      }
    },
    Intellianalysis1() {
      if (this.is_login == true) {
        let router = this.$router.resolve({
          path: `inAnalysis/talentLibrary`,
        });
        window.open(router.href, "_blank");
      } else {
        this.login_register();
      }
    },
    Intellianalysis2() {
      if (this.is_login == true) {
        let router = this.$router.resolve({
          path: `inAnalysis/three`,
        });
        window.open(router.href, "_blank");
      } else {
        this.login_register();
      }
    },
    Intellianalysis3() {
      if (this.is_login == true) {
        let router = this.$router.resolve({
          path: `inAnalysis/findTalent`,
        });
        window.open(router.href, "_blank");
      } else {
        this.login_register();
      }
    },
    Intellianalysis4() {
      if (this.is_login == true) {
        let router = this.$router.resolve({
          path: `inAnalysis/diagnosisIndex`,
        });
        window.open(router.href, "_blank");
      } else {
        this.login_register();
      }
    },
    // 头部导航下拉菜单
    batchOperate(command) {
      switch (command) {
        case "batch_remarks":
          this.dialogRemarks();
          break;
        case "export_excel":
          this.exportExcel();
          break;
      }
    },
    // 头部导航下拉菜单    选择数据平台版本（快手，抖音 等）
    // exportExcel() {
    //   let router = this.$router.resolve({
    //     path: `/talent_main/searchRoot`,
    //   })
    //   window.open(router.href, '_blank')
    // },
    dialogRemarks() {
      // this.$router.push('')
      // console.log('@@')
    },
    // menu
    selectMenu(index) {
      if (index) {
        this.routerName = index;
        // 判断是否登录了
        if (this.is_login) {
          this.$router.push(index);
        } else {
          this.login_register();
        }
      } else {
        if(!this.is_login){
          this.login_register();
        }
      }
    },
    // 跳转
    goPage(index, id) {
      let router = "";
      // 判断是否登录了
      if (this.is_login == true) {
        switch (index) {
          case 1:
            router = this.$router.resolve({
              path: `/talent_main/live_house`,
            });
            window.open(router.href, "_blank");
            break;
          case 2:
            router = this.$router.resolve({
              path: `/talent_main/explosiveProRoot`,
            });
            window.open(router.href, "_blank");
            break;
          case 3:
            router = this.$router.resolve({
              path: `/talent_main/liveTrafficMarket`,
            });
            window.open(router.href, "_blank");
            break;
          case 4:
            router = this.$router.resolve({
              path: `/talent_main/bring_goods/1`,
            });
            window.open(router.href, "_blank");
            break;
          case 5:
            router = this.$router.resolve({
              path: `/talent_main/videoListRoot`,
            });
            window.open(router.href, "_blank");
            break;
          case 6:
            router = this.$router.resolve({
              path: `/talent_main/talentSalesList`,
            });
            window.open(router.href, "_blank");
            break;
          case 7:
            router = this.$router.resolve({
              path: `/talent_main/goodsListRoot`,
            });
            window.open(router.href, "_blank");
            break;
          case 8:
            router = this.$router.resolve({
              path: `/talent_main/star_map`,
            });
            window.open(router.href, "_blank");
            break;
          case 9:
            router = this.$router.resolve({
              path: `/talent_main/tdetails/${id}/${0}`,
            });
            window.open(router.href, "_blank");
            break;
          case 10:
            router = this.$router.resolve({
              path: `/talent_main/shopList`,
            });
            window.open(router.href, "_blank");
            break;
          case 11:
            router = this.$router.resolve({
              path: `/talent_main/compare`,
            });
            window.open(router.href, "_blank");
            break;
          case 12:
            router = this.$router.resolve({
              path: `/talent_main/hot_video`,
            });
            window.open(router.href, "_blank");
            break;
          case 13:
            router = this.$router.resolve({
              path: `/talent_main/shop_main/${id}/0`,
            });
            window.open(router.href, "_blank");
            break;
          case 14:
            router = this.$router.resolve({
              path: `/talent_main/liveDetailsRoot/${id}/0`,
            });
            window.open(router.href, "_blank");
            break;
          case 15:
            router = this.$router.resolve({
              path: `/talent_main/tdetails/${id}/`,
            });
            window.open(router.href, "_blank");
            break;
          case 16:
            router = this.$router.resolve({
              path: `/talent_main/shop_main/${id}/`,
            });
            window.open(router.href, "_blank");
            break;
        }
      } else {
        switch (index) {
          case 1:
            this.routerName = "/talent_main/live_house";
            break;
          case 2:
            this.routerName = "/talent_main/explosiveProRoot";
            break;
          case 3:
            this.routerName = "/talent_main/liveTrafficMarket";
            break;
          case 4:
            this.routerName = "/talent_main/bring_goods/1";
            break;
          case 5:
            this.routerName = "/talent_main/videoListRoot";
            break;
          case 6:
            this.routerName = "/talent_main/talentSalesList";
            break;
          case 7:
            this.routerName = "/talent_main/goodsListRoot";
            break;
          case 8:
            this.routerName = "/talent_main/star_map";
            break;
          case 9:
            this.routerName = `/talent_main/tdetails/${id}/${0}`;
            break;
          case 10:
            this.routerName = "/talent_main/shopList";
            break;
          case 11:
            this.routerName = "/talent_main/compare";
            break;
          case 12:
            this.routerName = "/talent_main/hot_video";
            break;
          case 13:
            this.routerName = `/talent_main/shop_main/${id}/0`;
            break;
          case 14:
            this.routerName = `/talent_main/liveDetailsRoot/${id}/0`;
            break;
        }
        this.login_register();
      }
    },
    // 数据信息
    getLiveFlowTrend() {
      let that = this;
      that.$axios
        .get("/api/live/GetLiveFlowTrend")
        .then((res) => {
          if (res.data.code == 0) {
            that.flow_rate = res.data.data.flow_rate;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // banner 图片
    getbenner() {
      this.$axios
        .post("/api/Activities/GetActivities", {
          Module: 1,
          Platform: 0,
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.PcBanner = res.data.data;
          }
        });
    },
    // 两侧活动图片
    getBilateralBanner() {
      this.$axios
        .post("/api/Activities/GetFestivalActivities", {
          Module: 1,
          Platform: 0,
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.bilateralBanner = res.data.data;
          }
        });
    },
    // 达人粉丝榜
    getFansRank() {
      let that = this;
      that.loading01 = true;
      that.$axios
        .post("/fansRankAnonymous", {
          category: 0,
          date: this.getPDate(),
          fans: 0,
          favorite: 0,
          isshop: 0,
          key: "",
          listtype: 0,
          pageindex: 1,
          pagesize: 5,
          rankType: 1,
          video: 0,
          SortType: 1,
        })
        .then((res) => {
          if (res.data.code == 0) {
            that.fansList = res.data.data.list;
            that.loading01 = false;
            if (that.fansList.length >= 5) {
              that.fansList = that.fansList.slice(0, 5);
            } else {
              that.fansList = that.fansList;
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 达人销量榜-即抖音销量榜
    getSales() {
      let that = this;
      that.loading02 = true;
      // 时间 13:00前只能看前两天的 13:00后看前一天的
      let time = new Date();
      let d = new Date();
      let h = d.getHours();
      time = that.timestamp(
        Number(new Date()) / 1000 - 24 * 60 * 60,
        "Y-M-D"
      );
      // if (h >= 13) {
      //   time = that.timestamp(
      //     Number(new Date()) / 1000 - 24 * 60 * 60,
      //     "Y-M-D"
      //   );
      // } else {
      //   time = that.timestamp(
      //     Number(new Date()) / 1000 - 48 * 60 * 60,
      //     "Y-M-D"
      //   );
      // }
      that.$axios
        .post("/api/product/PostDYVolumeRanksAnonymous", {
          Age: "不限",
          CategoryId: "0",
          Gender: "不限",
          Index: 1,
          Keyword: "",
          ProFrom: -1,
          RankType: 1,
          Size: 5,
          categoryIds: [],
          // Time: time,
          Time: this.getPDate(),
          type: 1,
        })
        .then((res) => {
          if (res.data.code == 0) {
            that.salesList = res.data.data.ranks;
            that.loading02 = false;
            if (that.salesList.length >= 5) {
              that.salesList = that.salesList.slice(0, 5);
            } else {
              that.salesList = that.salesList;
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 直播排行榜
    getLiveRank() {
      let that = this;
      that.loading03 = true;
      that.$axios
        .get("/api/live/GetProLiveRankAnonymous", {
          params: {
            category_id: 0,
            type: 1,
            page: 1,
            size: 5,
            Keyword: "",
            day: this.getPDate(),
            pro_category_id: 0,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            that.liveList = res.data.data.data;
            that.loading03 = false;
            if (that.liveList.length >= 5) {
              that.liveList = that.liveList.slice(0, 5);
            } else {
              that.liveList = that.liveList;
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 星图达人榜
    star_map04() {
      let that = this;
      that.loading02 = true;
      that.$axios
        .post("api/author/GetStarMapMastersAnonymous", {
          Category: 0,
          // date: that.timestamp(
          //   Number(new Date()) / 1000 - 24 * 60 * 60,
          //   'Y-M-D'
          // ),
          HintType: 0,
          Index: 1,
          Size: 5,
        })
        .then((res) => {
          if (res.data.code == 0) {
            that.star_map = res.data.data.masters;
            that.loading02 = false;
            if (that.star_map.length >= 5) {
              that.star_map = that.star_map.slice(0, 5);
            } else {
              that.star_map = that.star_map;
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getPDate(){
      let dateObj = new Date();
      let pDate = '';
      let oneDayS = 24 * 60 * 60;
      if(dateObj.getHours() < 8){
        pDate = new Date() / 1000 - oneDayS * 2;
      }else{
        pDate = new Date() / 1000 - oneDayS;
      }
      pDate = this.timestamp(pDate,"Y-M-D");
      return pDate;
    },
    // 直播达人榜
    volume05() {
      let that = this;
      that.$axios
        .post("/api/live/PostLiveAuthorRankAnonymous", {
          CategoryId: 0,
          Index: 1,
          Keyword: "",
          ProCategoryName: "全部",
          RankType: 1,
          Size: 5,
          SortValue: 4,
          time: this.getPDate(),
        })
        .then((res) => {
          if (res.data.code == 0) {
            that.volume = res.data.data.ranks;
            that.loading03 = false;
            if (that.volume.length >= 5) {
              that.volume = that.volume.slice(0, 5);
            } else {
              that.volume = that.volume;
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 直播爆品榜
    liveproducts06() {
      let that = this;
      that.loading03 = true;
      that.$axios
        .post("/api/Live/PostHotStyleGoodsAnonymous", {
          proCategory: 0,
          index: 1,
          size: 5,
        })
        .then((res) => {
          if (res.data.code == 0) {
            that.liveproducts = res.data.data.ranks;
            that.loading03 = false;
            if (that.liveproducts.length >= 5) {
              that.liveproducts = that.liveproducts.slice(0, 5);
            } else {
              that.liveproducts = that.liveproducts;
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    go_to_page01(parm) {
      // let str = `http://www.zsjx114.com/aboutUs?tabName=${parm}`
      let str = `./corporate?tabName=${parm}`;
      window.open(str, "_blank");
    },
    indexLogOut(e){
      this.is_login = e;
      this.photo = "";
      this.person_message = null;
    },
    exit() {
      this.is_login = false;
      this.photo = "";
      this.person_message = null;
      this.$clearLocal();
      this.$message({
        message: "退出登录成功！",
        // type: 'success',
        duration: 2000,
        offset: "400",
      });
    },
    get_person() {
      let that = this;
      this.$axios(
        {
          method: "get",
          url: "/api/customer/getperson",
        },
        {
          cancelToken: new that.$axios.CancelToken(function executor(c) {
            if (that.cancel05) that.cancel05();
            that.cancel05 = c;
          }),
        }
      )
        .then((response) => {
          if (response.data.code == 0) {
            // console.log('index');
            this.person_message = response.data.data;
          }
          if (response.data.code == 1006) {
            this.$clearLocal();
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    phone_login01() { //账号密码登录
      if (!this.phone_01) {
        this.log_phone = true;
      }
      var reg =
        /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[\(\)])+$)([^(0-9a-zA-Z)]|[\(\)]|[a-z]|[A-Z]|[0-9]){8,24}$/;
      if (!reg.test(this.password_01)) {
        this.log_password = true;
        this.account = false;
        return;
      } else {
        this.log_password = false;
        this.account = true;
      }

      if (!this.password_01) {
        this.log_password = true;
      }

      if (
        !this.log_phone &&
        !this.log_password &&
        this.phone_01 &&
        this.password_01
      ) {
        this.$axios
          .post("/api/customer/LoginPhone", {
            Mobile: this.phone_01,
            Password: md5(this.password_01),
          })
          .then((res) => {
            if (res.data.code == 0) {
              this.errMsg = 0;
              this.$message({
                message: "登录成功！",
                type: "success",
                duration: 2000,
                offset: "400",
              });
              localStorage.setItem("user_id", res.data.data.accountId);
              localStorage.setItem("photo", res.data.data.headImgUrl);
              this.dialog = false;
              this.get_person();
              this.photo = localStorage.getItem("photo");
              this.is_login = true;
              if (this.$store.state.loginedUrl) {
                // this.$router.push(this.$store.state.loginedUrl);
                location.href = this.$store.state.loginedUrl;
              } else if (this.routerName) {
                // this.$router.push(this.routerName);
                location.href = this.routerName;
              } else if(this.urlPms.redirectUrl){
                // this.$router.push("/talent_main/workbench");
                location.href = decodeURIComponent(this.urlPms.redirectUrl);
              } else {
                // this.$router.push("/talent_main/workbench");
                location.href = "/talent_main/workbench";
              }
            } else {
              this.$message({
                message: res.data.msg,
                type: "error",
                duration: 2000,
                offset: "400",
              });
            }
            // if (res.data.code == 1001) {
            //   var reg =
            //     /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[\(\)])+$)([^(0-9a-zA-Z)]|[\(\)]|[a-z]|[A-Z]|[0-9]){8,24}$/;
            //   if (!reg.test(this.password_01)) {
            //     this.log_password = true;
            //     this.account = false;
            //   } else {
            //     this.log_password = false;
            //     this.account = true;
            //   }
            // }
          });
      }
    },

    phone_login() {
      if (!(this.phone.length == 11 && this.code.length == 6)) {
        this.errMsg = 7;
      }
      let that = this;
      this.$axios
        .post(
          "/api/customer/smslogin",
          {
            Mobile: that.phone,
            Code: that.code,
            InviteCode: this.urlPms.invitecode,
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel04) that.cancel04();
              that.cancel04 = c;
            }),
          }
        )
        .then((response) => {
          if (response.data.code == 0) {
            this.$message({
              message: "登录成功！",
              type: "success",
              duration: 2000,
              offset: "400",
            });
            // if(response.data.data.loginType==2&&this.urlPms.invitecode){
            //   localStorage.setItem('drawVipPop', true)
            // }
            // 判断是注册并且携带邀请码
            if(response.data.data.loginType==2){
              if(this.urlPms.invitecode){
                localStorage.setItem('drawVipPop', true)
              }
              // 用encodeURIComponent编码的链接
              if(this.urlPms.redirectUrl){
                if(this.urlPms.redirectUrl.indexOf("invitecode")!=-1){
                  localStorage.setItem('drawVipPop', true)
                }
              }
              
            }
            //记录注册密码
            if (this.register) {
              //注册过用户的不需要调用
              this.$axios
                .post("/api/customer/SetUpPassword", {
                  Mobile: that.phone,
                  Password: md5(this.import_password),

                  Code: that.code,
                })
                .then((res) => {
                  this.setUserInfo(response);
                });
            } else {
              this.setUserInfo(response);
            }
          } else {
            if (document.getElementsByClassName("el-message").length === 0) {
              this.$message({
                message: response.data.msg,
                type: "error",
                duration: 2000,
                offset: "400",
              });
            }
          }
          // else if (response.data.code == 1) {
          //   this.$message({
          //     message: '手机号不存在！',
          //     type: 'error',
          //     duration: 2000,
          //     offset: '400'
          //   });
          // } else {
          //   if (this.phone.length != 11) {
          //     this.note_phone = true;
          //   }
          //   if (this.code.length != 6) {
          //     this.note_code = true;
          //     this.note_code_02 = false;
          //   }
          // }
          // if (response.data.code == 2) {
          //   this.note_code_02 = true;
          // }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    setUserInfo(response) {
      localStorage.setItem("user_id", response.data.data.accountId);
      localStorage.setItem("photo", response.data.data.headImgUrl);
      // localStorage.setItem("loginType", response.data.data.loginType);
      this.dialog = false;
      this.get_person();
      this.photo = localStorage.getItem("photo");
      this.is_login = true;
      if (this.routerName) {
        // this.$router.push(this.routerName);
        location.href = this.routerName;
      } else if(this.urlPms.redirectUrl){
        // this.$router.push("/talent_main/workbench");
        location.href = decodeURIComponent(this.urlPms.redirectUrl);
      }else {
        location.href = "/talent_main/workbench";
      }
    },
    loginCheckFn(num) {
      // 账号登陆
      this.emptyL = false;
      this.phone_01 = "";
      this.password_01 = "";
      //  短信
      this.phone = "";
      this.code = "";
      this.import_password = "";
      this.import_password02 = "";
      this.register = false;
      this.log_phone = false;
      this.log_password = false;
      this.account = false;
      this.getCode = false;
      this.errMsg_01 = false;
      this.errMsg = 0;
      this.phone_format = false;
      this.isShow_num = false;
      this.isShow_user = false;
      this.isShow_code = false;
      this.isShow_code_01 = false;
      this.one_password = false;
      this.note_phone = false;
      this.note_code_03 = false;
      this.note_code = false;
      this.note_code_02 = false;
      this.note_getCode = false;
      this.note_err = false;

      this.active = num;
      if (num == 2) {
        clearInterval(this.loop);
        this.loop = null;
      } else {
        clearInterval(this.loop);
        this.loop = null;
      }
    },
    ewmLogin() {
      this.active = 2;
      this.hover = 0;
      // console.log(this.active);
    },
    login_register() {
      this.active = 1;
      this.dialog = true;
    },
    getEWM() {
      let that = this;
      this.loading = true;
      this.$axios(
        {
          method: "get",
          url: "/api/customer/getLoginQrcode",
        },
        {
          cancelToken: new that.$axios.CancelToken(function executor(c) {
            if (that.cancel01) that.cancel01();
            that.cancel01 = c;
          }),
        }
      )
        .then((response) => {
          if (response.data.code == 0) {
            this.wx_code = response.data.data.url;
            this.loading = false;
            this.sessionId = response.data.data.sessionId;
            // 正式
            this.loop = setInterval(() => {
              // console.log('loop01',this.loop);
              if (this.loop != null) {
                this.$axios(
                  {
                    method: "get",
                    url: "/api/customer/checkLogin",
                    params: {
                      // sessionId: "123456",
                      sessionId: that.sessionId,
                    },
                  },
                  {
                    cancelToken: new that.$axios.CancelToken(function executor(
                      c
                    ) {
                      if (that.cancel02) that.cancel02();
                      that.cancel02 = c;
                    }),
                  }
                )
                  .then((response) => {
                    if (response.data.code == 0) {
                      this.$message({
                        message: "登录成功！",
                        type: "success",
                        duration: 2000,
                        offset: "400",
                      });
                      this.dialog = false;
                      clearInterval(this.loop);
                      this.loop = null;
                      localStorage.setItem(
                        "user_id",
                        response.data.data.accountId
                      );
                      localStorage.setItem(
                        "photo",
                        response.data.data.headImgUrl
                      );
                      this.get_person();
                      this.photo = response.data.data.headImgUrl;
                      this.is_login = true;
                      if (this.routerName) {
                        // this.$router.push(this.routerName);
                        location.href = this.routerName;
                      } else if(this.urlPms.redirectUrl){
                        location.href = decodeURIComponent(this.urlPms.redirectUrl);
                      } else {
                        // this.$router.push('/talent_main/workbench');
                        location.href = "/talent_main/workbench";
                      }
                    } else if (response.data.code == -1) {
                      clearInterval(this.loop);

                      // 该微信没有绑定手机号
                      this.dialog = false;
                      this.vx_is = false;
                      this.bindPhonePop = true;
                      this.phone = "";
                      this.code = "";
                      this.errMsg = 0;
                      this.loopTime = null;
                      this.time = "获取验证码";
                    }
                  })
                  .catch((error) => {
                    clearInterval(this.loop);
                    this.loop = null;
                    console.log(error);
                  });
              }
            }, 1000);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 获取验证码
    get_code(codeType) {
      let that = this;
      if (this.time != "重新获取" && this.time != "获取验证码") {
        return false;
      }

      const str =
        /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
      if (
        !str.test(this.phone) ||
        this.phone.length == 0 ||
        this.phone.length != 11
      ) {
        that.note_phone = true;
        // if (this.code.length == 6) {
        //   this.getCode = false;
        //   this.note_getCode = false;
        //   this.note_code = false;
        // } else {
        //   this.note_getCode = true;
        //   this.getCode = true;
        //   this.note_code = true;
        // }
        return;
      } else {
        that.errMsg = 0;
      }

      // if (this.code.length == 6) {
      //   this.note_getCode = false;
      //   this.getCode = false;
      //   this.note_code = false;
      // } else {
      //   this.note_getCode = true;
      //   this.getCode = true;
      //   this.note_code = true;
      // }
      // if(this.code.length)

      if (codeType == 1) {
        that.$axios
          .get("/api/customer/VerifyMobile", {
            params: {
              mobile: that.phone,
            },
          })
          .then((res) => {
            if (res.data.code == 0) {
              that.getsmsCode();
            } else if (res.data.code == 1) {
              that.errMsg = 3;
              return false;
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        if (!this.note_code_03) {
          that.getsmsCode();
        }
      }
    },

    getsmsCode() {
      let that = this;
      let temp = 60;
      this.time = temp + "s";
      this.isTimering = true;
      this.loopTime = setInterval(() => {
        temp -= 1;
        this.time = temp + "s";
        if (temp == 0) {
          clearInterval(this.loopTime);
          this.time = "重新获取";
          this.isTimering = false;
        }
      }, 1000);
      //   获取验证码
      this.$axios(
        {
          method: "get",
          url: "/api/customer/getsms",
          params: {
            mobile: that.phone,
          },
        },
        {
          cancelToken: new that.$axios.CancelToken(function executor(c) {
            if (that.cancel03) that.cancel03();
            that.cancel03 = c;
          }),
        }
      )
        .then((response) => {
          if (response.data.code == 0) {
            if (response.data.data) {
              this.oldUsers = true;
            } else {
              this.oldUsers = false;
            }
            this.$message({
              message: "发送成功！",
              type: "success",
              duration: 2000,
              offset: "400",
            });
          } else {
            if (document.getElementsByClassName("el-message").length === 0) {
              this.$message({
                message: response.data.msg,
                type: "error",
                duration: 2000,
                offset: "400",
              });
            }
          }
          if (response.data.code == 0 && response.data.data == "") {
            //如果未注册用户data返回空，反之返回当前用户手机号
            this.register = true;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop() {
      const that = this;
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 2);
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed;
        if (that.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    },
    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop() {
      const that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      if (that.scrollTop > 300) {
        that.is_show_go_to_top = true;
      } else {
        that.is_show_go_to_top = false;
      }
    },
    // 登录弹窗tab鼠标经过
    hover01() {
      if (this.active == 2) {
        this.hover = 1;
      }
    },
    hover02() {
      if (this.active == 1) {
        this.hover = 1;
      }
    },
    // 验证手机号
    checkPhone(type) {
      const str =
        /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
      if (
        !str.test(this.phone) ||
        this.phone.length == 0 ||
        this.phone.length != 11
      ) {
        this.note_phone = true;
      } else {
        this.note_phone = false;
      }
      let that = this;

      this.isFocus = false; //失去焦点
    },
    // 账号登陆验证手机号
    checkPhone_01() {
      const str =
        /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
      if (!str.test(this.phone_01)) {
        this.log_phone = true;
      }
    },
    //账号登陆验证密码
    password_text() {
      var reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{8,16}$/;
      if (!reg.test(this.password_01)) {
        this.log_password = true;
        this.account = false;
      }
    },
    // 禁止输入空格
    keydown(e) {
      if (e.keyCode == 32) {
        e.returnValue = false;
        console.log(111111);
      }
    },
    // 忘记密码验证手机号
    checkPhone_forget() {
      this.isShow_user = false;
      this.isShow_num = false;
      const str =
        /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
      if (!str.test(this.phone_forget)) {
        this.phone_format = true;
      }
    },
    //忘记密码获取验证码
    get_code_01() {
      if (this.time != "重新获取" && this.time != "获取验证码") {
        return false;
      }
      const str =
        /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
      if (
        !str.test(this.phone_forget) ||
        this.phone_forget.length == 0 ||
        this.phone_forget.length != 11
      ) {
        this.phone_format = true;
        return false;
      } else {
        this.errMsg = 0;
      }

      let that = this;
      let temp = 60;
      this.time = temp + "s";
      this.isTimering = true;
      this.loopTime = setInterval(() => {
        temp -= 1;
        this.time = temp + "s";
        if (temp == 0) {
          clearInterval(this.loopTime);
          this.time = "重新获取";
          this.isTimering = false;
        }
      }, 1000);
      //   获取验证码
      this.$axios({
        method: "get",
        url: "/api/customer/getsms",
        params: {
          mobile: this.phone_forget,
        },
      })
        .then((response) => {
          console.log(response.data);
          if (response.data.code == 0) {
            this.$message({
              message: "发送成功！",
              type: "success",
              duration: 2000,
              offset: "400",
            });
          } else {
            if (document.getElementsByClassName("el-message").length === 0) {
              this.$message({
                message: response.data.msg,
                type: "error",
                duration: 2000,
                offset: "400",
              });
            }
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 忘记密码时的验证码验证
    checkCode_01() {
      this.isShow_code = false;
      if (this.time == "获取验证码") {
        this.isShow_code_01 = true;
      }

      if (this.code_01.length != 6) {
        this.isShow_code_01 = true;
      }
    },
    // 忘记密码时的密码
    forgetPassword() {
      var reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{8,16}$/;
      if (!reg.test(this.forget_password)) {
        this.one_password = true;
      }
    },
    // 忘记密码时的确认密码
    forgetPassword_02() {
      if (this.forget_password != this.forget_password_02) {
        this.errMsg = 10;
      }
    },
    //忘记密码完成保存
    phone_login_01() {
      if (!this.phone_forget) {
        this.phone_format = true;
      }
      if (!this.code_01) {
        this.isShow_code_01 = true;
      }
      if (!this.forget_password) {
        this.one_password = true;
      }
      if (this.forget_password != this.forget_password_02) {
        this.errMsg = 10;
      }
      if (
        this.phone_forget &&
        this.code_01 &&
        !this.phone_format &&
        !this.isShow_code_01 &&
        !this.one_password &&
        this.forget_password == this.forget_password_02
      ) {
        this.$axios
          .post("/api/customer/SetUpPassword", {
            Mobile: this.phone_forget,
            Password: md5(this.forget_password),

            Code: this.code_01,
          })
          .then((res) => {
            if (res.data.code == 0) {
              this.$message({
                message: "密码修改成功！",
                type: "success",
                duration: 2000,
                offset: "400",
              });
              this.forget_is = false;
              this.dialog = true;
            } else {
              if (document.getElementsByClassName("el-message").length === 0) {
                this.$message({
                  message: res.data.msg,
                  type: "error",
                  duration: 2000,
                  offset: "400",
                });
              }
            }
            // if (res.data.code == 1002) {
            //   this.isShow_user = true;
            // }
            // if (res.data.code == 1009) {
            //   this.isShow_code = true;
            // }
            // if (res.data.code == 1008) {
            //   this.isShow_num = true;
            // }
          });
      }
    },
    // 验证验证码格式
    checkCode() {
      if (this.time == "获取验证码") {
        this.note_code = true;

        this.note_getCode = true;
      }
      if (this.code.length != 6) {
        // this.note_code = true;

        this.note_code = true;
      }
      if (this.code.length == 0) {
        this.getCode = true;
      }
    },
    // 绑定手机号
    confirmBtn() {
      if (this.register) {
        var reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{8,16}$/;
        if (!reg.test(this.import_password)) {
          this.errMsg_01 = true;
        }
      }
      //   const str = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
      // if (
      //   !str.test(this.phone_forget) ||
      //   this.phone_forget.length == 0 ||
      //   this.phone_forget.length != 11
      // ) {
      // 绑定手机号的时候验证手机号是否绑定过别的微信

      if (!this.phone) {
        this.note_phone = true;
      }
      if (
        !this.code.length > 0 &&
        !this.code.length != 6 &&
        this.time != "获取验证码"
      ) {
        this.note_code = true;
      }
      if (this.import_password != this.import_password02) {
        this.errMsg = 4;
      }
      if (this.time == "获取验证码") {
        this.note_getCode = true;
      }
      // console.log(this.note_phone, "note_phone");
      // console.log(this.note_code, "note_code");
      // console.log(this.note_code_03, "note_code_03");
      // console.log(this.note_getCode, "note_getCode");
      // console.log(this.errMsg_01, "errMsg_01");
      if (
        this.phone != "" &&
        this.code.length == 6 &&
        this.note_phone != true &&
        this.note_code != true &&
        !this.note_err &&
        this.import_password == this.import_password02 &&
        !this.note_code_03 &&
        !this.note_getCode &&
        !this.errMsg_01
      ) {
        let that = this;
        that.$axios
          .post("/api/customer/bindmobile", {
            mobile: that.phone,
            code: that.code,
            // SessionId: "123456",
            SessionId: that.sessionId,
          })
          .then((response) => {
            if (response.data.code == 0) {
              // this.$axios
              //   .get("/api/customer/VerifyMobile", {
              //     params: {
              //       mobile: this.phone
              //     }
              //   })
              //   .then(res => {
              //     if (res.data.code == 0) {
              this.$message({
                message: "操作成功！",
                type: "success",
                duration: 2000,
                offset: "400",
              });
              this.dialog = false;
              clearInterval(this.loop);
              this.loop = null;
              localStorage.setItem("user_id", response.data.data.accountId);
              localStorage.setItem("photo", response.data.data.headImgUrl);
              this.get_person();
              this.photo = response.data.data.headImgUrl;
              this.is_login = true;
              if (this.$store.state.loginedUrl) {
                // this.$router.push(this.$store.state.loginedUrl);
                location.href = this.$store.state.loginedUrl;
              } else if (this.routerName) {
                // this.$router.push(this.routerName);
                location.href = this.routerName;
              } else if(this.urlPms.redirectUrl){
                // this.$router.push("/talent_main/workbench");
                location.href = decodeURIComponent(this.urlPms.redirectUrl);
              }else{
                location.href = "/talent_main/workbench";
              }
              //记录注册密码
              this.$axios
                .post("/api/customer/SetUpPassword", {
                  Mobile: that.phone,
                  Password: md5(this.import_password),

                  Code: that.code,
                })
                .then((res) => {});
            } else {
              if (document.getElementsByClassName("el-message").length === 0) {
                this.$message({
                  message: response.data.msg,
                  type: "error",
                  duration: 2000,
                  offset: "400",
                });
              }
            }
            // })
            // .catch(err => {
            //   console.log(err);
            // });
            // }
            //             if (response.data.code == 1) {
            //               this.note_code_03 = true;
            //             }
            //
            //             if (response.data.code == 4) {
            //               this.note_code_02 = true;
            //             }
            //             if (response.data.code == 3) {
            //               this.note_err = true;
            //             }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    closePOP02() {
      clearInterval(this.loop);
      this.loop = null;
      this.phone = "";
      this.code = "";
      this.errMsg = 0;
      clearInterval(this.loopTime);
      this.loopTime = null;
      this.time = "获取验证码";
      this.$store.commit("registerChange", false);
      this.$store.commit("isPopLoginBox", false);
      this.$store.commit("loginedUrl", "");
    },
    toSearch() {
      let str = this.trimStr(this.keywords).substr(0, 100);
      // console.log("theKeywords", str);
      let theKeywords = "";
      // 对搜索词编码  escape不对* @ - _ + . / 编码 所以单独转
      theKeywords = encodeURIComponent(str);
      if (this.keywords.indexOf("*") > -1) {
        theKeywords = this.keywords.replace(/\*/g, "%2A");
      }
      if (this.keywords.indexOf("@") > -1) {
        theKeywords = this.keywords.replace(/\@/g, "%40");
      }
      if (this.keywords.indexOf("-") > -1) {
        theKeywords = this.keywords.replace(/\-/g, "%2D");
      }
      if (this.keywords.indexOf("_") > -1) {
        theKeywords = this.keywords.replace(/\_/g, "%5F");
      }
      if (this.keywords.indexOf("+") > -1) {
        theKeywords = this.keywords.replace(/\+/g, "%2B");
      }
      if (this.keywords.indexOf(".") > -1) {
        theKeywords = this.keywords.replace(/\./g, "%2E");
      }
      if (this.keywords.indexOf("/") > -1) {
        theKeywords = this.keywords.replace(/\//g, "%2F");
      }
      if (this.keywords.indexOf("%") > -1) {
        theKeywords = this.keywords.replace(/\%/g, "%25");
      }
      if (this.searchType == "达人") {
        // 判断是否登录了
        if (this.is_login == true) {
          let router = this.$router.resolve({
            path: `/talent_main/search?keyword=${theKeywords}`,
          });
          window.open(router.href, "_blank");
        } else {
          this.routerName = `/talent_main/search?keyword=${theKeywords}`;
          this.login_register();
        }
      }
      if (this.searchType == "商品") {
        // 判断是否登录了
        if (this.is_login == true) {
          let router = this.$router.resolve({
            path: `/talent_main/searchRoot?keyword=${theKeywords}`,
          });
          window.open(router.href, "_blank");
        } else {
          this.routerName = `/talent_main/searchRoot?keyword=${theKeywords}`;
          this.login_register();
        }
      }
      if (this.searchType == "直播间") {
        // 判断是否登录了
        if (this.is_login == true) {
          let router = this.$router.resolve({
            path: `/talent_main/liveSearchRoot?keyword=${theKeywords}`,
          });
          window.open(router.href, "_blank");
        } else {
          this.routerName = `/talent_main/liveSearchRoot?keyword=${theKeywords}`;
          this.login_register();
        }
      }
      if (this.is_login == true) {
        // 请求搜索数据接口
        this.$axios({
          method: "get",
          url: "/api/customer/RecordSearchLog",
          params: {
            key: this.keywords,
          },
        })
          .then((res) => {
            // console.log(res);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    useNow(index) {
      let that = this;
      this.analysisPop = false;
      localStorage.setItem("analysisPop", false);
      if (this.is_login == true) {
        if (index == 0) {
          let router = this.$router.resolve({
            path: `/inAnalysis/talentLibrary`,
          });
          window.open(router.href, "_blank");
        } else if (index == 1) {
          let router = this.$router.resolve({
            path: `/inAnalysis/findTalent`,
          });
          window.open(router.href, "_blank");
        } else if (index == 2) {
          let router = this.$router.resolve({
            path: `/inAnalysis/diagnosisIndex`,
          });
          window.open(router.href, "_blank");
        }
      } else {
        if (index == 0) {
          that.routerName = "/inAnalysis/talentLibrary";
        } else if (index == 1) {
          that.routerName = "/inAnalysis/findTalent";
        } else if (index == 2) {
          that.routerName = "/inAnalysis/diagnosisIndex";
        }
        that.login_register();
      }
    },
    closeAnalysis() {
      this.analysisPop = false;
      localStorage.setItem("analysisPop", false);
    },

    changeAct(n) {
      // debugger;
      for (var i = 0; i < 4; i++) {
        // this.acts[i] = -1
        this.acts.splice(i, 1, -1);
      }
      this.acts.splice(n, 1, 1);
      // this.setPosition()
      // let open = document.getElementsByClassName('showClass')

      // let that = this
      // setTimeout(() => {
      //   that.act = n
      // }, 100)
    },
    // 搜索框聚焦 让搜索记录出现
    Inputfocus() {
      if (this.is_login == true) {
        this.isShow = true;
        this.$axios({
          method: "get",
          url: "/api/customer/GetSearchLog",
        })
          .then((res) => {
            // console.log(res.data.data)
            if (res.data.code == 0) {
              this.search_wen = res.data.data;
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },

    // 点击x删除记录 删除对应的id
    removeThis(id) {
      this.$axios({
        method: "get",
        url: "/api/customer/DeleteSearchLog",
        params: {
          ids: id,
        },
      })
        .then((res) => {
          if (res.data.code == 0) {
            this.search_wen = this.search_wen.filter((item) => item.id !== id);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 点击历史记录 让记录出现在输入框内
    add_click(item) {
      this.keywords = item;
      // this.isShow = false
    },
    // 点击删除图标 删除全部搜索记录
    removeAll() {
      let itemLod = "";
      this.search_wen.forEach((item) => {
        itemLod += item.id + ",";
      });
      itemLod = itemLod.substring(0, itemLod.lastIndexOf(","));
      this.$axios({
        method: "get",
        url: "/api/customer/DeleteSearchLog",
        params: {
          ids: itemLod,
        },
      })
        .then((res) => {
          if (res.data.code == 0) {
            this.search_wen = [];
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 微信登陆
    vx_login() {
      this.vx_is = true;
      this.dialog = false;
      this.getEWM();
    },
    clone2() {
      this.vx_is = false;
      this.dialog = true;
      this.$store.commit("isPopLoginBox", false);
      this.$store.commit("loginedUrl", "");
    },
    // 验证密码
    checkPassword() {
      if (!this.import_password.length) {
        this.emptyL = true;
      } else {
        this.emptyL = false;
      }
      var reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{8,16}$/;
      if (!reg.test(this.import_password)) {
        this.errMsg_01 = true;
      }
    },
    //确认密码
    affirm_password() {
      if (this.import_password != this.import_password02) {
        this.errMsg = 4;
      }
    },
    affirm_password_111() {
      this.errMsg = 0;
      var reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{8,16}$/;
      if (!reg.test(this.import_password)) {
        this.errMsg_01 = true;
      }
    },
    //提交注册
    affirm_password_02() {  //短信登录/注册
      if (!this.import_password.length) {
        this.emptyL = true;
      } else {
        this.emptyL = false;
      }
      if (!this.phone) {
        this.note_phone = true;
      }
      if (
        this.code.length != 0 &&
        this.code.length != 6 &&
        this.time != "获取验证码"
      ) {
        this.note_code = true;
      }
      if (this.code == "" && this.time != "获取验证码") {
        this.note_code = true;
      }
      if (this.import_password != this.import_password02) {
        this.errMsg = 4;
      }
      if (this.time == "获取验证码") {
        this.note_code = true;
      } else {
        this.note_code = false;
        if (this.code.length != 6) {
          this.getCode = true;
          this.note_code = true;
        }
      }
      if (this.oldUsers) {
        if (
          !this.note_phone &&
          !this.note_code &&
          !this.errMsg_01 &&
          !this.getCode &&
          this.code != "" &&
          this.import_password == this.import_password02
        ) {
          this.phone_login();
        }
      } else {
        if (
          !this.note_phone &&
          !this.note_code &&
          !this.errMsg_01 &&
          !this.getCode &&
          this.code != "" &&
          this.import_password == this.import_password02 &&
          this.import_password.length
        ) {
          this.phone_login();
        }
      }
    },
    opendialog() {
      // 账号登陆
      this.phone_01 = "";
      this.password_01 = "";
      //  短信
      this.phone = "";
      this.code = "";
      this.import_password = "";
      this.import_password02 = "";
      this.register = false;
      // 忘记密码
      this.phone_forget = "";
      this.code_01 = "";
      this.forget_password = "";
      this.forget_password_02 = "";
      this.log_phone = false;
      this.log_password = false;
      this.account = false;
      this.getCode = false;
      this.errMsg_01 = false;
      this.errMsg = 0;
      this.phone_format = false;
      this.isShow_num = false;
      this.isShow_user = false;
      this.isShow_code = false;
      this.isShow_code_01 = false;
      this.one_password = false;
      this.note_phone = false;
      this.note_code_03 = false;
      this.note_code = false;
      this.note_code_02 = false;
      this.note_getCode = false;
      this.note_err = false;
    },
    // 投诉建议
    // 详细内容获取焦点边框色
    text_err() {
      this.text_hint = false;
      let input = document.querySelector(".el-textarea__inner");
      input.style.borderColor = "#e5e5e5";
    },
    complaint() {
      this.value_cause = "";
      this.textarea = "";
      this.link = "";
      this.mail = "";
      this.link_hint = false;
      this.link_err = false;
      this.cause_hint = false;
      this.text_hint = false;
      this.mail_hint = false;
      this.mail_err = false;
      let input01 = document.querySelectorAll(".el-input__inner");
      input01[1].style.borderColor = "#e5e5e5";
      let input = document.querySelector(".el-textarea__inner");
      input.style.borderColor = "#e5e5e5";
    },
    submit() {
      if (!this.link) {
        this.link_hint = true;
        this.link_err = true;
      }
      if (!this.value_cause) {
        this.cause_hint = true;
        let input = document.querySelectorAll(".el-input__inner");
        input[1].style.borderColor = "#ea3721";
      }
      if (!this.textarea) {
        this.text_hint = true;
        let input = document.querySelector(".el-textarea__inner");
        input.style.borderColor = "#ea3721";
      }
      if (!this.mail) {
        this.mail_hint = true;
        this.mail_err = true;
      }
      if (this.link && this.mail && this.value_cause && this.textarea) {
        this.$axios
          .post("/api/customer/complaints", {
            Link: this.link,
            Reason: this.value_cause,
            Detail: this.textarea,
            Email: this.mail,
          })
          .then((res) => {
            console.log(res);
            if (res.data.code == 0) {
              this.complaint_is = false;
              this.$message({
                message:
                  "投诉成功! 您可在个人中心-消息通知或您的邮箱里查看处理结果",
                type: "success",
                duration: 3000,
              });
            }
          });
      }
    },
    blur_cause() {
      let input01 = document.querySelectorAll(".el-input__inner");
      input01[1].style.borderColor = "#e5e5e5";
    },
  },
};
</script>
<style scoped lang="less">
// 日期选择表
.el-date-table td.end-date span,
.el-date-table td.start-date span {
  background-color: #fd7f2c !important;
}
.el-date-table td.available:hover {
  color: #fd7f2c !important;
}
// 头部导航样式
.is-active .el-submenu__title {
  border-bottom-color: transparent !important;
  border-bottom: 2px solid transparent !important;
}
.streamer_box {
  position: fixed;
  width: 336px;
  height: 100vh;
  z-index: 9;
  img {
    width: 100%;
  }
}
.left_streamer {
  top: 0;
  left: 0;
}
.right_streamer {
  top: 0;
  right: 0;
}
// 活动灯笼小于1320px时隐藏
@media screen and (max-width: 1890px) {
  .streamer_box {
    width: 200px;
  }
}
@media screen and (max-width: 1600px) {
  .streamer_box {
    width: 150px;
  }
}
@media screen and (max-width: 1490px) {
  .streamer_box {
    margin-top: 61px;
    width: 180px;
  }
}
.bgp {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}
.dialogLoginBox {
  background-color: rgba(0, 0, 0, 0.5);
}
.loginContainer {
  position: relative;
  min-height: 430px-80px;
  padding: 40px 50px;
  background-color: #fff;
  border-radius: 4px;
  .tabTitile {
    position: relative;
    margin-bottom: 36px;
    font-size: 0;
    border-bottom: 1px solid #efefef;
    color: #222;
    span {
      display: inline-block;
      width: 50%;
      padding-bottom: 7px;
      font-size: 20px;
      font-weight: bold;
      line-height: 30px;
      text-align: center;
      cursor: pointer;
      letter-spacing: 1px;
      &.active {
        color: #fd7f2c;
      }
    }
    i {
      position: absolute;
      bottom: -1px;
      left: 0;
      display: block;
      width: 50%;
      height: 1px;
      background-color: #fd7f2c;
      transition: all linear 150ms;
      &.active {
        transform: translateX(100%);
      }
    }
  }

  .tabContent {
    .inputItem {
      position: relative;
      margin-top: 19px;
      &:first-child {
        margin-bottom: 0;
      }
    }
    .inpDelImg {
      position: absolute;
      right: 20px;
      width: 14px;
      height: 14px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
    }
    .is_password {
      margin-top: 27px;
    }
    .inputBox {
      position: relative;
      &.passwordBox {
        float: left;
        width: 245px;
      }
      .hide {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 14px;
        cursor: pointer;
      }
      .inpDelImg {
        position: absolute;
        right: 20px;
        width: 14px;
        height: 14px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
      }
      i {
        position: absolute;
        left: 21px;
        top: 14px;
        display: inline-block;
        width: 14px;
        height: 17px;
        &:extend(.bgp);
        vertical-align: middle;
        &.phone {
          background-image: url("../assets/meng/login_phone.png");
        }
        &.password {
          background-image: url("../assets/li/safety.png");
        }
        &.password_02 {
          background-image: url("../assets/meng/login_password.png");
        }
      }
      input {
        display: inline-block;
        box-sizing: border-box;
        width: 100%;
        padding: 0 15px 0 49px;
        height: 45px;
        border: none;
        font-size: 14px;
        color: #222;
        border-radius: 4px;
        vertical-align: middle;
        border: 1px solid #e5e5e5;
        caret-color: #fd7f2c;
        &:focus {
          border: 1px solid #fd7f2c !important;
        }
      }
    }
    .codeBtn {
      float: right;
      height: 45px;
      width: 101px;
      border: 1px solid #e5e5e5;
      border-radius: 4px;
      font-size: 14px;
      color: #222;
      &:hover {
        color: #fd7f2c;
      }
      &.timering {
        color: #888;
        &:hover {
          color: #888;
        }
      }
    }
    p {
      font-size: 12px;
      margin-top: 5px;
      &.psdErrMsg {
        position: absolute;
        margin-top: 0;
        bottom: -21px;
        left: 0;
      }
    }
    .is_top {
      margin-top: 14px;
      // margin-top: 7px;
    }
    .is_top_02 {
      margin-top: 25px;
    }
    .is_top_vx {
      margin-top: 25px;
    }
  }
  .vx_box {
    margin-top: 14px;
    display: flex;
    align-items: center;

    .VX {
      width: 22px;
      height: 22px;
      margin-right: 7px;
      cursor: pointer;
    }
    span {
      font-size: 14px;
      color: #555555;
      cursor: pointer;
    }
    .forget {
      cursor: pointer;
      font-size: 14px;
      font-weight: normal;
      color: #fd7f2c;
    }
  }
  .is_top {
    margin-top: 26px;
  }

  .loginFooter {
    padding-top: 50px;
    box-sizing: border-box;
    button {
      display: inline-block;
      box-sizing: border-box;
      width: 100%;
      height: 50px;
      margin-bottom: 10px;
      font-size: 16px;
      color: #fff;
      letter-spacing: 1px;
      background-color: #fd7f2c;
      border-radius: 4px;
      &:hover {
        background-color: #ff924b;
      }
    }
    p {
      font-size: 12px;
      color: #888;
      text-align: center;
      line-height: 30px;
      span {
        color: #fd7f2c;
      }
    }
  }
  .close {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
  .vx_box02 {
    padding-left: 18px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    font-weight: 600;
    text-align: left;
    color: #222222;
    border-bottom: 1px solid #efefef;
    margin-top: 0px;
  }
}
.tabContentwxCode {
  min-height: 350px;
  background: #ffffff;
  text-align: center;
  position: relative;
  padding: 40px 50px;
  border-radius: 4px;
  .ewmImg {
    width: 180px;
    height: 180px;
    margin-top: 60px;
  }
  .wechatTip {
    margin-top: 14px;
    font-size: 14px;
    color: #888;
    img {
      display: inline-block;
      width: 22px;
      height: 22px;
      margin-right: 6px;
      vertical-align: middle;
    }
    span {
      display: inline-block;
      vertical-align: middle;
    }
  }
  .vx_box {
    padding-left: 18px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    font-weight: 600;
    text-align: left;
    color: #222222;
    border-bottom: 1px solid #efefef;
  }
  .close {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
}
.dialog01 {
  .dialog_content {
    letter-spacing: 0;
    position: relative;
    height: 380px;
    // background-color: #ffffff;
    // background-color: rgba(2, 7, 17, 0.5);
    border-radius: 20px;
    box-sizing: border-box;
    // 登录注册优化
    .tabBox {
      width: 100%;
      height: 94px;
      background-image: url("../assets/meng/tabBg1.png");
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      div {
        cursor: pointer;
        width: 50%;
        font-size: 20px;
        color: #ffffff;
        text-align: center;
        padding-top: 20px;
      }
      .activeClass {
        color: #222222 !important;
      }
    }
    // tab背景
    .tabBg01 {
      background-image: url("../assets/meng/tabBg1.png");
    }
    .tabBg02 {
      background-image: url("../assets/meng/tabBg4.png");
    }
    .tabBg03 {
      background-image: url("../assets/meng/tabBg2.png");
    }
    .tabBg04 {
      background-image: url("../assets/meng/tabBg3.png");
    }
    .bodyBox {
      min-height: 259px;
      background-color: #fff;
      border-radius: 0 0 20px 20px;
      padding: 0px 62px;
      padding-bottom: 36px;

      .part01 {
        overflow: hidden;
        text-align: center;
        padding-top: 23px;
        .ewmImg {
          width: 180px;
          height: 180px;
        }
        .wechatIcon {
          width: 18px;
          height: 14px;
          vertical-align: -1px;
        }
        .wechatTip {
          font-size: 14px;
          color: #888888;
          // border-bottom: 1px solid #e5e5e5;
          width: 383px;
          text-align: center;
          padding-top: 18px;
          padding-bottom: 22px;
        }
      }
      > .d1:hover {
        background-image: url("../assets/meng/p8.png") !important;
      }
      > .d1 {
        position: absolute;
        right: 11px;
        top: 14px;
        background-image: url("../assets/meng/p9.png");
        background-position: center center;
        box-sizing: border-box;
        background-repeat: no-repeat;
        background-size: 48px 40px;
        width: 48px;
        height: 40px;
      }
      > .d2:hover {
        background-image: url("../assets/meng/p10.png") !important;
      }
      > .d2 {
        position: absolute;
        right: 11px;
        top: 14px;
        background-image: url("../assets/meng/p11.png");
        background-position: center center;
        box-sizing: border-box;
        background-repeat: no-repeat;
        background-size: 44px 44px;
        width: 44px;
        height: 44px;
        // margin-bottom: 11px !important;
      }
      > .d3 {
        font-size: 20px;
        color: #222222;
        text-align: center;
      }
    }
  }
}
.dialog02 {
  .bindPhone {
    position: relative;
    width: 500px;
    height: 350px;
    background-color: #ffffff;
    border-radius: 20px;
    box-sizing: border-box;
    padding: 0 61px;
    .titleText {
      font-size: 20px;
      color: #222222;
      padding-top: 42px;
      padding-bottom: 28px;
    }
  }
}
.errMsg {
  font-size: 14px;
  color: #ea1b0b;
  text-align: left;
  span {
    text-decoration: underline;
    font-size: 13px;
    color: #fd7f2c;
    cursor: pointer;
  }
}
.errBorder {
  border: solid 1px #ea1b0b !important;
}
// 手机号验证码
.part02 {
  text-align: center;
  // padding-top: 51px;
  padding-top: 12px;
  .active_btn {
    background-color: #fd7f2c !important;
    color: #fff !important;
  }
  > button {
    margin-bottom: 20px;
    width: 376px;
    height: 54px;
    background-color: #f5f5f5;
    border-radius: 4px;
    font-size: 14px;
    color: #888888;
    line-height: 50px;
  }
  > .d2 {
    button {
      position: absolute;
      z-index: 2;
      right: 0;
      border-left: 1px solid #e5e5e5;
      padding-left: 8px;
      font-size: 14px;
      width: 104px;
      color: #fd7f2c;
      height: 14px;
      background-color: transparent;
      span {
        display: block;
        margin-top: -4px;
      }
    }
    position: relative;
    margin-bottom: 11px;
    display: flex;
    align-items: center;
    padding-right: 10px;
    width: 100%;
    height: 42px;
    background-color: #f5f5f5;
    border-radius: 4px;
    margin-top: 20px;
    box-sizing: border-box;
  }
  > .d1 {
    display: flex;
    align-items: center;
    padding-top: 2px;
    > p {
      width: 60px;
      height: 42px;
      background-color: #f5f5f5;
      border-radius: 4px;
      font-size: 14px;
      line-height: 40px;
      color: #888888;
      margin-right: 10px;
    }
  }
  > img {
    width: 180px;
    height: 180px;
    margin-bottom: 20px;
  }
  .loginBtn {
    margin-top: 42px;
  }
  > .d4 {
    font-size: 14px;
    color: #888888;
    text-align: center;
    // padding-top: 20px;
    cursor: pointer;
    span {
      color: #fd7f2c;
    }
  }
}
/* 放回顶部 */
.code:hover {
  background-image: url("../assets/meng/i21_2.png");
}
.code {
  background-image: url("../assets/meng/i21.png");
  background-size: 20px 20px;
  width: 100%;
  height: 20px;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  border-radius: 4px;
  position: relative;
  box-sizing: border-box;
}
.code_content div:last-child {
  margin-top: 12px;
}
.code_content {
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 12px;
  letter-spacing: 0px;
  color: #222222;
}
.message_content img {
  width: 120px;
  height: 120px;
  margin-bottom: 10px;
}
.message_content {
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 12px;
  letter-spacing: 0px;
  text-align: center;
}

.message_index:hover {
  background-image: url("../assets/meng/i22_2.png");
}
.message_index {
  background-image: url("../assets/meng/i22.png");
  background-size: 20px 18px;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  border-radius: 4px;
  box-sizing: border-box;
  height: 20px;
  position: relative;
  z-index: 29999;
}
.top:hover {
  background-image: url("../assets/meng/i23_2.png");
}
.top {
  background-image: url("../assets/meng/i23.png");
  background-size: 20px 20px;
  width: 100%;
  background-position: center center;
  border-radius: 4px;
  box-sizing: border-box;
  background-repeat: no-repeat;
  height: 20px;
  cursor: pointer;
}
.go_to_top {
  li:first-child {
    border-top: none;
  }
  li:nth-of-type(1),
  li:nth-of-type(2),
  li:nth-of-type(3) {
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
    span {
      margin: 0 10px;
    }
  }
  li:nth-of-type(4),
  li:nth-of-type(5) {
    border-top: none;
  }
  li:nth-of-type(1) {
    border-top-left-radius: 4px;
  }
  li:nth-of-type(3) {
    border-bottom-left-radius: 4px;
  }
  li:nth-of-type(5) {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  li {
    margin: 0 10px;
    width: 90%;
    height: 50px;
    box-sizing: border-box;
    border-top: 1px solid #e5e5e5;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background: #fff;
  }

  border-radius: 4px;
  display: flex;
  align-items: center;
  align-items: center;
  flex-direction: column;
  position: fixed;
  right: 0;
  z-index: 9999;
  width: 50px;
  bottom: 40px;
  .suggest {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  .text {
    width: 100%;
    height: 36px;
    font-size: 13px;
    text-align: center;
    color: #fd7f2c;
    cursor: pointer;
  }
}

/* 放回顶部 */
.content {
  //  流量数据检测
  .banner_s {
    width: 1200px;
    height: 166px;
    margin: 40px auto 0;
    border-radius: 14px;
    overflow: hidden;
    // .el-carousel__item:nth-child(2n) {
    //   background-color: #99a9bf;
    // }

    // .el-carousel__item:nth-child(2n+1) {
    //   background-color: #d3dce6;
    // }
    /deep/.el-carousel__indicators{
      display: none;
    }
  }
  .bgbox {
    width: 100%;
    overflow: hidden;
    .numdata {
      width: 1200px;
      margin: 0 auto;
      // height: 200px;
      display: flex;
      border-radius: 12px;
      background: #fff;
    }
  }

  .dataBox {
    width: 930px;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    justify-content: space-around;
    align-items: center;
    *zoom: 1;
    .data1 > p:nth-of-type(1) {
      margin-top: 10px !important;
    }
    .dataItem {
      width: 140px;

      background-position: center bottom;
      background-repeat: no-repeat;
      background-size: 132px;
      cursor: pointer;
      p {
        text-align: center;
      }
      p:nth-child(1) {
        font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC,
          Helvetica Neue, Helvetica, Arial, sans-serifsans-serifsans-serif !important;
        font-size: 26px;
        color: #fd7f2c;
        font-weight: 550;
      }
      p:nth-child(2) {
        font-size: 16px;
        color: #646464;
        margin-top: 10px;
        img {
          width: 16px;
          height: 12px;
          display: inline-block;
          margin-top: -2px;
          display: none;
        }
      }
      > p:nth-of-type(1) {
        margin-top: 10px !important;
      }
    }
    .dataItem:hover p:nth-of-type(2) {
      color: #ff924b;
      transition: 0.5s;
    }
    .dataItem:hover p:nth-of-type(2) img {
      display: inline-block;
      transition: 0.5s;
    }
  }
  // 正在直播+星图达人 （共计8个目录）
  .pageBox {
    display: none;
    width: 1200px;
    margin: 0 auto;
    margin-top: 51px;
    // display: flex;
    // justify-content: space-between;
    .pageItem {
      cursor: pointer;
      width: 116px;
      height: 116px;
      background-color: #ffffff;
      box-shadow: 0px 0px 30px 0px #e3e2e2;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        width: 35px;
      }
      img:hover {
        transition: all 0.5s;
        -moz-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        transform: scaleX(-1);
        /*兼容IE*/
        filter: FlipH;
      }
      p {
        font-size: 14px;
        color: #888888;
      }
    }
    .pageItem:nth-child(2) {
      img {
        width: 30px;
      }
    }
    .pageItem:nth-child(3) {
      img {
        width: 40px;
      }
    }
    .pageItem:nth-child(4) {
      img {
        width: 36px;
      }
    }
    .pageItem:nth-child(5) {
      img {
        width: 41px;
      }
    }
    .pageItem:nth-child(6) {
      img {
        width: 30px;
      }
    }
    .pageItem:nth-child(7) {
      img {
        width: 31px;
      }
    }
    .pageItem:nth-child(2) {
      img {
        width: 41px;
      }
    }
  }
  // 热门榜单
  .hotRankBox {
    width: 1200px;
    margin: 0 auto;
    .hotTitle {
      font-size: 24px;
      color: #222222;
      letter-spacing: 1px;
      font-weight: 600;
      font-family: PingFangSC-Medium;
      padding-top: 50px;
      padding-bottom: 20px;
    }
    .hotRank {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      .hotItem {
        // box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
        box-sizing: border-box;
        width: 390px;
        background-color: #fff;
        padding: 0 20px 10px 20px;
        border-radius: 12px;
        box-shadow: 0px 0px 18px 0px rgba(222, 222, 222, 0.59);
        .titleLine {
          display: flex;
          justify-content: space-between;
          padding: 20px 0 10px 0;
          border-bottom: solid 1px #e5e5e5;
          span:nth-child(1) {
            font-size: 16px;
            color: #222222;
            font-weight: 550;
            letter-spacing: 1px;
          }
          span:nth-child(2) {
            font-size: 14px;
            color: #fd7f2c;
            padding: 2px 6px;
            border: 1px solid #fd7f2c;
            border-radius: 15px;
            margin-left: 206px;
            cursor: pointer;
            img {
              width: 7px;
              height: 12px;
              margin-top: -4px;
            }
          }
        }
        .titlelive {
          span:nth-child(2) {
            margin-left: 106px;
          }
        }
        .table01 {
          width: 100%;
          thead {
            font-size: 14px;
            color: #555555;
            tr {
              height: 42px;
              color: #888888;
              th {
                font-weight: 400;
              }
              th:nth-child(1) {
                width: 49.7%;
                text-align: left;
                padding-left: 6px;
              }
            }
          }
          tbody {
            tr {
              text-align: center;
              height: 60px;
            }
            tr:hover span {
              // color: #fd7f2c;
              color: #ff924b;
            }
            td:nth-of-type(2),
            td:nth-of-type(3) {
              font-size: 14px;
              font-weight: 600;
              font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC,
                Helvetica Neue, Helvetica, Arial, sans-serifsans-serifsans-serif !important;
            }
            .avatorBox:last-of-type {
              margin-bottom: 10px;
            }
            .avatorBox {
              cursor: pointer;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              img {
                width: 40px;
                height: 40px;
                border: 1px solid #e5e5e5;
                border-radius: 50%;
              }
              span {
                display: inline-block;
                text-align: left;
                font-size: 14px;
                color: #222222;
                padding-left: 14px;
                width: 111px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
            .goodsIcon {
              width: 40px;
              height: 40px;
              border-radius: 6px !important;
              border: 1px solid #e5e5e5;
            }
          }
        }
      }
    }
  }
  // pc首页banner图
  .PcBanner {
    width: 100%;
    height: 100%;
    cursor: pointer;
    object-fit: cover;
  }
  // 智能分析
  .Inteanalysis {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 50px;
    .hotTitle {
      font-size: 24px;
      color: #222222;
      letter-spacing: 1px;
      font-weight: 600;
      font-family: PingFangSC-Medium;
      padding-bottom: 20px;
    }
    .boxcontainer {
      margin-bottom: 50px;
      display: flex;
      width: 1200px;
      border-radius: 12px;
      overflow: hidden;
      .showClass {
        //鼠标移入效果
        width: 612px !important;
        // flex: 1.46 !important;
        transition: all 1.5s ease-out 0s;
        background: #f5f5f5 !important;
        .h4 {
          display: none !important;
        }
        .moreshow {
          display: block !important;
        }
      }
      .box:last-of-type {
        border-right: 1px solid #fff;
      }
      .box {
        // width: 300px;
        flex: 1;
        border-right: 1px solid #646464;
        background: #3d3d3d;
        height: 260px;

        .h4 {
          img,
          span {
            display: block;
          }
          img {
            width: 22px;
            height: 22px;
            margin: 100px auto 20px auto;
          }
          span {
            text-align: center;
            font-size: 18px;
            color: #fff;
            letter-spacing: 2px;
          }
        }
        // 展示内容
        .moreshow {
          display: none;
          width: 607px;
          height: 100%;
          padding: 0 150px 0 20px;
          box-sizing: border-box;
          .h5 {
            padding: 30px 0;
            font-size: 18px;
            color: #fff;
          }
          p {
            line-height: 30px;
            font-size: 16px;
            color: #fff;
          }
          a:hover {
            text-decoration: none;
            transform: scale(1.1);
            transition: 0.3s;
          }
          a {
            display: block;
            width: 106px;
            line-height: 38px;
            font-size: 16px;
            text-align: center;
            color: #fd7f2c;
            border: 1px solid transparent;
            border-radius: 4px;
            background: #fff;
            margin-top: 30px;
            cursor: pointer;
          }
        }
        .syban00 {
          background: url("../assets/zhao/ban00.png") no-repeat 400px 32px,
            url("../assets/zhao/dise.png") no-repeat, #fff;
        }
        .syban01 {
          background: url("../assets/zhao/bann01.png") no-repeat 400px 32px,
            url("../assets/zhao/dise.png") no-repeat;
        }
        .syban02 {
          background: url("../assets/zhao/bann03.png") no-repeat 400px 32px,
            url("../assets/zhao/dise.png") no-repeat;
        }
        .syban03 {
          background: url("../assets/zhao/bann04.png") no-repeat 400px 32px,
            url("../assets/zhao/dise.png") no-repeat 100% 100%;
        }
      }
    }
  }
}
.navimg {
  width: 14px;
  height: 14px;
  display: inline-block;
}
.header {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  position: relative;
  .headerFixedBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 62px;
    background-color: #fff;
    z-index: 99;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.08),
      0 9px 28px rgba(0, 0, 0, 0.05), 0 12px 48px 16px rgba(0, 0, 0, 0.03);
    .ulBox {
      position: relative;
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      font-size: 14px;
      color: #222222;
      height: 62px;
      background-color: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .logoBoxtop {
        width: 188px;
        display: flex;
        .logo {
          width: 88px;
          height: 32px;
          margin-right: 12px;
        }
        // 头部导航下拉菜单
        .dropdown {
          .el-button {
            width: 88px;
            height: 34px;
            border-radius: 4px;
            border: solid 1px #e5e5e5;
            .el-icon--right {
              width: 10px;
              height: 10px;
              font-size: 10px;
              color: #555555;
              font-weight: 600;
            }
          }
          .el-button--mini {
            padding: 8px;
            display: block;
            font-size: 14px;
            color: #555;
            line-height: 16px;
          }
          .el-button:hover {
            color: #555;
            border-color: #e5e5e5;
            background-color: transparent;
          }
          // 抖音，快手logo
          .ddlogo {
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-top: -2px;
            margin-right: 2px;
          }
        }
      }
      .flexRight {
        // flex: 1;
        display: flex;
        justify-content: flex-end;
        height: 62px;
        .menuList {
          // width: 724px;
          height: 56px;
          .navbox {
            span {
              display: inline-block;
              width: 124px;
              text-align: left;
            }
          }
        }
      }
      .hrightBox {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        // width: 210px;
        .activity_btn {
          display: flex;
          align-items: center;
          padding-right: 10px;
          box-sizing: border-box;
          cursor: pointer;
          .svip_btn{
            position: relative;
            width: 157px;
            height: 32px;
            background: url("~@/assets/shi/grbhy.png") no-repeat;
            background-size: 100% 100%;
            img{
              width: 48px;
              height: 25px;
              position: absolute;
              right: -6px;
              top: -13px;
            }
          }
          img {
            width: 74px;
            height: 46px;
          }
          .btn {
            display: flex;
            align-items: center;

            font-size: 14px;
            font-weight: 600;
            color: #d0610c;
            span {
              margin-left: 5px;
            }
          }
          .vip {
            width: 32px;
            height: 32px;
            display: inline-block;
            vertical-align: middle;
          }
          .vip0,
          .vip1 {
            background: url("~@/assets/shi/svip.png");
            background-size: cover;
          }
          .vip2 {
            background: url("~@/assets/shi/plus.png");
            background-size: cover;
          }

          .vip3,
          .vip4 {
            background: url("~@/assets/shi/vip.png");
            background-size: cover;
          }
        }
        > button {
          height: fit-content;
          padding: 2px 11px;
          background-color: #fd7f2c;
          border-radius: 4px;
          font-size: 14px;
          line-height: 26px;
          color: #ffffff;
          text-align: center;
          white-space: nowrap;
        }
        > button:hover {
          background-color: #ff924b;
        }
        > .avatar:hover {
          > .message {
            display: block !important;
          }
        }
        > .avatar {
          display: flex;
          align-items: center;
          position: relative;
          width: 34px;
          height: 62px;
          margin-left: 40px;
          .vip_wrap {
            width: 16px;
            height: 12px;
            position: absolute;
            bottom: 13px;
            right: -5px;
            img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }

          .message {
            .bg01 {
              background-image: url("../assets/meng/novip.png");
              .novip {
                background: #414558;
                width: 244px;
                height: 60px;
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
                padding: 20px 15px 0 15px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                span {
                  color: #fff !important;
                  font-size: 13px;
                  padding-top: 20px;
                }
                > button {
                  width: 72px;
                  height: 28px;
                  line-height: 28px;
                  border-radius: 20px;
                  background: #fee0c8;
                  color: #222;
                  margin-top: -4px;
                }
              }
            }
            .bg02 {
              background-image: url("../assets/meng/vip.png");
              .vipbox {
                width: 244px;
                height: 60px;
                overflow: hidden;
                background: #414659;
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
                display: flex;
                justify-content: space-between;
                padding: 0 15px;
                box-sizing: border-box;
                > div {
                  > p {
                    padding-top: 14px;
                    span {
                      font-size: 14px;
                      color: #fff !important;
                    }
                  }
                  > div {
                    font-size: 12px;
                    color: #b3b4bc;
                    display: flex;
                    > p {
                      width: 66px;
                      overflow: hidden;
                      height: 14px;
                    }
                  }
                }
                button {
                  width: 72px;
                  height: 28px;
                  line-height: 28px;
                  border-radius: 20px;
                  background: #fee0c8;
                  color: #222;
                  margin-top: 16px;
                }
              }
            }
            > div:first-child {
              > p:first-child {
                font-size: 18px;
                color: #222;
                padding-bottom: 18px;
              }
              > p:last-child {
                > span:nth-child(1) {
                  font-size: 12px;
                  color: #8e9298;
                  line-height: 28px;
                }
                > span:nth-child(2) {
                  font-size: 12px;
                  line-height: 28px;
                  color: #434951;
                }
                // > button:nth-child(3) {
                //   width: 72px;
                //   height: 28px;
                //   border-radius: 4px;
                //   border: solid 1px #555555;
                //   text-align: center;
                //   font-size: 12px;
                //   color: #555555;
                //   line-height: 24px;
                //   background-color: transparent;
                //   float: right;
                // }
              }
              width: 284px;
              //   height: 100px;
              background-position: center center;
              background-repeat: no-repeat;
              background-size: 100% 100%;
              padding-left: 20px;
              padding-top: 26px;
              box-sizing: border-box;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
            }
            ul {
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              background-color: #ffffff;
              li:nth-of-type(1) {
                padding-top: 24px;
              }
              li:last-of-type {
                padding-top: 20px;
                padding-bottom: 20px;
                border-top: 1px solid #e5e5e5;
              }
              li {
                cursor: pointer;
                width: 100%;
                padding: 12px 0;
                padding-left: 18px;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                font-size: 14px;
                color: #222222;
                img {
                  margin-right: 15px;
                }
                .img01 {
                  width: 16px;
                  height: 16px;
                }
                .img02 {
                  width: 16px;
                  height: 14px;
                }
                .img03 {
                  width: 16px;
                  height: 15px;
                }
              }
              li:hover {
                background: #f5f7fa;
              }
            }
            position: absolute;
            top: 62px;
            right: 0px;
            z-index: 99999999;
            width: 284px;
            background-color: #ffffff;
            box-shadow: 0px 0px 20px 0px rgba(181, 181, 181, 0.3);
            border-radius: 6px;
            box-sizing: border-box;
            display: none;
          }
          .user_head {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            cursor: pointer;
            overflow: hidden;
            > img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .down_app{
          flex: 1;
          display: flex;
          justify-content: flex-end;
          text-align: right;
          .down_app_box{
            width: 94px;
            height: 34px;
            line-height: 34px;
            border-radius: 4px;
            border: solid 1px #fd7f2c;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            img{
              width: 13px;
              height: 18px;
            }
            span{
              font-size: 14px;
              font-weight: 600;
              color: #fd7f2c;
              margin-left: 6px;
            }
          } 
        }
      }
    }
  }
  // banner
  .searchIndex {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 520px;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
    video {
      width: 100%;
      height: 520px;
      position: relative;
    }
    .zhegaiceng {
      position: absolute;
      top: 0px;
      left: 0;
      bottom: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.6);
      width: 100%;
      height: 100%;
      z-index: 1;
    }
    .searchItem {
      position: absolute;
      top: 2%;
      left: 19%;
      z-index: 5;
      width: 62.5%;
      margin: 0 auto;
      .searchTitle {
        font-size: 40px;
        font-weight: 600;
        color: #ffffff;
        text-align: center;
        padding-top: 140px;
        padding-bottom: 30px;
        letter-spacing: 1px;
      }
      .el-radio-group {
        display: block;
        text-align: center;
        margin-bottom: 15px;
      }
      .searchIndexBox {
        margin-top: 10px;
      }
      .search_wen {
        width: 716px !important;
        margin: 5px auto 0px auto;
        background-color: #fff !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
        padding: 8px 10px;
        box-shadow: 0px 0px 20px 0px rgba(236, 236, 236, 0.7);
        .first {
          padding: 5px 14px;
          span {
            color: #b5b5b5;
            font-size: 12px;
          }
          .removeAll {
            width: 15px;
            height: 16px;
            float: right;
            margin: 5px 9px;
            &:hover {
              cursor: pointer;
            }
          }
        }
        .second {
          height: 36px;
          line-height: 36px;
          font-size: 14px;
          padding: 0px 14px;
          span {
            display: inline-block;
            width: calc(100% - 50px);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          img {
            float: right;
            margin: 13px 12px;
            display: none;
          }
          &:hover {
            cursor: pointer;
            background-color: #f9f9f9;
          }
          &:hover img {
            display: block;
          }
        }
      }
    }
  }
}
#index {
  min-height: 100vh;
  width: 100%;
  background: #fff;
}
.imgLoadding {
  width: 180px;
  height: 180px;
  margin: 0 auto;
  .loadingInner {
    padding-top: 166px;
  }
}
.loadingIndex {
  padding-top: 15px;
}
.newImg {
  width: 14px;
  height: 14px;
  position: absolute;
  bottom: 13px;
  right: 18px;
  animation: navNewAni 2800ms linear infinite;
  @keyframes navNewAni {
    0% {
      transform: translateY(0px);
    }
    10% {
      transform: translateY(-2px);
    }
    20% {
      transform: translateY(0px);
    }
    30% {
      transform: translateY(-2px);
    }
    40%,
    100% {
      transform: translateY(0px);
    }
  }
}
.bannerImg {
  width: 935px;
  height: 527px;
}
.carouselItemBox {
  position: relative;
  .useNowBtn {
    width: 130px;
    height: 45px;
    background-color: #ff7419;
    border-radius: 23px;
    font-size: 16px;
    color: #ffffff;
    position: absolute;
    top: 255px;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .close {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
}

// 头部下拉菜单的菜单样式
.el-dropdown-menu--small .el-dropdown-menu__item {
  height: 28px;
  line-height: 28px;
  padding: 0 18px !important;
  font-size: 14px;
  color: #555;
  img {
    display: inline-block;
    margin-right: 4px;
    width: 16px;
    height: 16px;
    margin-top: -2px;
  }
  .el-popper {
    left: 456px !important;
  }
}
.clear {
  &:after,
  &::before {
    content: "";
    display: block;
    clear: both;
  }
}
[btn],
[link] {
  cursor: pointer;
}
// 投诉建议
.complaint_box {
  width: 630px;
  position: relative;
  padding: 30px;
  background: #ffffff;
  .box {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    p:nth-child(1) {
      width: 4px;
      height: 16px;
      background-color: #fd7f2c;
      border-radius: 2px;
    }
    p:nth-child(2) {
      font-size: 16px;
      font-weight: 600;
      color: #222222;
      margin-left: 5px;
    }
  }
  .content {
    text-align: center;
    .err {
      border: solid 1px #ea3721 !important;
    }
    .link_box {
      .link {
        display: flex;
        align-items: center;
        p {
          font-weight: 600;
          margin-right: 15px;
          font-size: 14px;
          color: #555555;
          span {
            color: #ea3721;
          }
        }
        input {
          width: 526px;
          height: 45px;
          background-color: #ffffff;
          border-radius: 4px;
          border: solid 1px #e5e5e5;
          font-size: 14px;
          color: #222222;
          padding-left: 15px;
        }
      }
      .err_box {
        height: 30px;
        line-height: 30px;
        .err_hint {
          text-align: left;
          padding-left: 83px;
          font-size: 12px;
          color: #ea3721;
        }
      }
    }
    button {
      width: 140px;
      height: 50px;
      background-color: #fd7f2c;
      border-radius: 4px;
      font-size: 16px;
      font-weight: normal;
      color: #ffffff;
      margin-top: 30px;
    }
    button:hover {
      background-color: #ff924b;
    }
  }
  img {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 14px;
    cursor: pointer;
    right: 14px;
  }
}
.index_title {
  font-family: PingFangSC-Medium;
  margin: 50px 0 36px;
  text-align: center;
  &.top100 {
    margin-top: 100px;
  }
  h3 {
    font-size: 26px;
    line-height: 30px;
    color: #222222;
    margin-bottom: 10px;
  }
  p {
    font-size: 16px;
    line-height: 30px;
    color: #888888;
  }
}
.hands {
  cursor: pointer;
}
.indexPop .el-menu-item {
  height: initial !important;
  &.is-active {
    color: #222 !important;
  }
  .navbox {
    padding-bottom: 10px;
  }
}
.frame_box{
  // padding: 15px 18px 14px;
  box-sizing: border-box;
  .code_img{
    width: 110px;
    height: 110px;
    img{
      width: 100%;
      height: 100%;
    }
  }
}
</style>
